I have a knockout js application. Which is predominantly implemented using the asynchronous module definition (AMD) technique. The application is quite big and its kind of legacy now. Is there any possible way to add webpack to compile all the js and generate a bundle with no changes to existing js codes.
I did install webpack. I gave the main js file which is the entrypoint of the app. Which eventually calls all the sub js using require or dependency('<filename>')function(attrs..) this is ko AMD syntax.
But the webpack didn't generate the required build at all.
https://knockoutjs.com/documentation/amd-loading.html
Related
I am currently developing a Typescript application using lit html. I have reached the point where I want to bundle all my typescript files, minimize them in to a single javascript file. Using VS Code as the IDE.
I have been looking at options - rollup.js is one option but I couldn't work out how to bundle multiple ts files in to a single js file, minimize it and also ensure the modules are handled correctly.
Any examples of using rollup.js to do such available or another alternative available?
You can use Parcel js for this as well. This will generate one js file. but if you require rollup js, may be this link will help you out.
Generate typescript definition files using rollup
I have an application that provides a downloadable JavaScript integration script for the application API. I would like to be able to compile this integration file using different settings compared to the main application front-end.
webpack.mix.js
// Compile js integration
mix.js('resources/js/integrations/FilterIntegration', 'integrations/filter.js');
// Compile the main application
mix.js('resources/js/layout/Root.js', 'public/js/app.js')
.sass('resources/sass/app.scss', 'public/css')
.extract(['react', 'react-router-dom', 'lodash']);
My problem is that this setup actually applies all the following chained commands to each of the compiled files. This means that my compiled integration file also has to use the vendor.js and manifest.js files that are created for the main application by the extract command and it also includes a sass import statement although obviously the integration has nothing to do with styles as it's simply ment as a JavaScript library.
So my question is the following: How do I set up my Laravel Mix compilation in a way where I can conveniently compile the integration libraries with settings separate from the main application?
Since 1.1 Kotlin has support for compiling code to JS. I want to find example of gradle project how to share some code (for example data-models) between js and jvm platforms. Ideally project should have this structure:
common module (compiles to .js and .class)
backend module (jvm)
frontend module (js, managed by webpack)
Is there any way to load AMD modules into an app generated using the new dojo 2 cli (#dojo/cli)? And have them be included in the webpack built output (#dojo/cli-build-webpack)?
I can see #dojo/loader in node_modules but I'm not sure how to take advantage of it. If I just include it via script tag in index.html, I'm guessing that the AMD modules won't be built into the webpack output.
My use case is that I'd like to build an app using ESRI's JavaScript API (https://github.com/Esri/arcgis-js-api/tree/4master) which is build on dojo 1.12.1 and uses AMD format for their modules.
They are working on it: github.com/dojo/cli-build/issues/165
I am looking to work on an Angular2 datepicker component as if for release and inclusion in multiple projects. What is the best way to structure the project for this compared to a regular Angular2 project built with angular-cli? Are there any examples of good starter projects/seeds for such a task? Or should the component library actually be an angular2 application itself?
My initial assumption was that I could just create a standard project with angular-cli which has a single module (e.g. MyDatepickerModule) which contains a hierarchy of components forming the datepicker however I don't know if this is the best way as I don't need everything that a full application provides.
Thanks for any guidance!
I would publish the library with AoT compatibility in mind.
This means compiling the source using the ngc compiler. In the distribution package I would publish the JS source, original html/css files, d.ts typings files and the ngc generated metadata.json files.
I recommend publishing the JS source with es2015 modules since this will make your library tree shakable. I would target es5 JS, but with es2015 modules . TypeScript allows for this hybrid mode by setting module to ES2015 and target to es5 in tsconfig.json.
Publishing these files will make your library AoT compatible and Tree shakable.
This is all the consuming application needs in order to AoT compile your library into their complete application.
It's not recommended to publish TypeScript in your package since this would require the consumer to replicate your build environment (typings + TS compiler version).
You can also publish a JiT compatible umd bundle with inlined templates and css. This can be helpful since it might not be practical do AoT during development since compilation is a bit slow. The umd bundle will make it possible to use your library in a JiT based dev environment. For production though you should definitely use the AoT version.
The CLI is not ideal for publishing libraries since CLI is primarily a tool for building complete applications. They might support libraries better in the future though.
Check out https://github.com/angular/material2. A work in progress, it's a library of controls and themes for Angular2 applying Material Design and is an excellent source for learning to build your own control library.