How to load AMD modules in dojo2 app - javascript

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

Related

Webpack for existing legacy knockout js application

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

TypeScript Library import another library

I'm developing a library in TypeScript.
This library uses the https://github.com/Simonwep/pickr library.
I would like to make my library available so users can use it, but question is: do I need to bundle pickr library or just put a reference in the package.json?
I tried to use the library in a sample project and in dev mode all works since it loads from node_modules, but when I build the project and try to load it fails to load it.
It works only by importing the library using
<script src="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/pickr.min.js"></script>
If library will be used in a web browser I made it so the script tag is automatically added.
But what if someone will use the library in an ionic project for instance which will run on a tablet?
In this case Pickr library needs to bundled in the final build.
Is this an automatic process? What's the correct way of using a third-party library in this case?
If you want pickr to get bundled with your code you will have to
List it under dependencies
Import it in your code (see pickr docs)
If its not imported in your code it wont be bundled.
If you want to tell the user to manually add pickr when he uses your module you can list pickr as a peerDependency in your package.json

What is the difference between ng build and webpack

As I understand it, ng-build creates a distributable packaged version of your application. I also understand that webpack is used to bundle Javascript modules.
I ran ng build on a test project and found that it created a dist folder containing what looked like a packaged version of my Angular application. All of the .js files had been combined however my referenced .css files had been left in the original form (not bundled or minified).
Therefore, what is the difference between using ng build or webpack to do this job. Or are they complimentary? Would I potentially use both in my deployment pipeline?
Not a complete answer, but worth to note:
If your css files were not compiled, it probably means, either:
you ran ng build (a.k.a. ng build --dev) which adds default --extract-css to false:
--extract-css (aliases: -ec)
Extract css from global styles onto css files instead of js ones.
You ran ng build --prod but forgot to reference your styles as global styles in angular.cli.json:
"styles": [
"styles.css",
"assets/styles/test.component.css"
],
Once you do this you will find your css files inlined, however, you will also find them in normal format as well. Cant understand why is that..
Webpack and ng-build do pretty much the same job, which is bundling your modules to be used in a browser environment For example, the Angular module is a feature, which doesn't support in the browser, and ES 6 modules are not implemented in any browser yet, which is why things need to be bundled.ng build only for angular. we can you webpack any UI related applications including angular.

Using a pre-minified Javascript library with jspm?

I am trying to do all my package management with JSPM, and I would like in some cases for the bundled minifed version of a library to be loaded by SystemJS instead of each individual source files (and I don't want to do the bundling myself with the JSPM CLI).
For example, I am doing the following:
jspm install angular2
And then I have a small application based on Angular2. When I look at what happens on the network, the browser loads a whole bunch of files that are part of Angular2, although in this particular case I would like to use angular2.dev.js, which is part of the angular2 module installed by JSPM (and maybe in production I would like to load something else).
Is there a way to do this with jspm (basically to replace bower + a script tag)?

Including standalone browserify bundle into main bundle

My browserify project is dependent on another browserify bundle, which uses standalone bundling. According to docs (on jquery example) I'm supposed to include it as a separate file. But I'd like to have my project in single file (as are my automatisation tools set up at the mooment). If I don't exclude it, my browserify fails to build as it complains about requires to nonexistant paths within dependency.
Is there a simple way to incorporate standalone build into my bundle?
Project I'm dependent on is Matterjs (link to this specific build)
Found it! Add this to your browserify config:
{
noParse: [require.resolve('matter-js')]
}

Categories