Geek Answers Handbook

AngularJS + TypeScript + ES6 modules: how is the bundle for the browser?

I am using Angular, TypeScript and ES6 module syntax. Suppose I have a module defined as follows:

// SubModule.ts import MyService from 'services/MyService'; export default angular.module('subModule', []) .service('myService', MyService);

Compiled JavaScript will look like this:

 var MyService_1 = require('services/MyService'); exports.default = angular.module('subModule', []) .service('myService', MyService_1.default);

My application depends on this module. Therefore, the following is in the App.ts file:

 // App.ts import SubModule from 'modules/SubModule'; angular.module('app', [SubModule.name]);

With the following compiled JavaScript:

 var SubModule_1 = require('modules/SubModule'); angular.module('app', [SubModule_1.default.name]);

So now I'm trying to link this for a browser. I am currently trying to use Browserify, but I am ready to use any binding tool. Browserify gives me an error, for example:

Unable to find module modules / SubModule 'from' C: \ the \ path \ to \ my \ app '

So, how do I get Browserify to work? Or is there another tool that will work better? I found this problem on Github, which seems to say that the default export from TypeScript is not compatible with CommonJS . So what should I do?

EDIT . So I think I found the problem. Browserify requires local paths to start with ./ . So, for example, I will need to reference my submodule as follows:

 import SubModule from './modules/SubModule';

Does anyone know of a Browserify plugin that will automatically search for a relative path even if I don't specify ./ ? My application is quite large and I don’t want to go through and modify all import statements.

Or, on the other hand, is there a TypeScript compiler option for emit './modules/SubModule' for 'modules/SubModule' ?

+5
source share
4 answers

You can use JSPM / Systemjs to load modules asynchronously, for example:

 System.import('./packageName/ModuleName')

and systemjs-builder for creating packages using the command line tool (jspm-cli)

 jspm bundle ./packageName/ModuleName dist/app.js

or using the gulp task using:

 var Builder = require('jspm').Builder; var builder = new Builder(); builder.loadConfig('jspm.conf.js') .then(function() { var buildConfig = { sfxFormat: 'amd', minify: true, sourceMaps: true }; return builder.buildSFX('./packageName/ModuleName', outFile, buildConfig); });

Here you can see the full working example: https://github.com/b091/ts-skeleton

+2
source

If you do not specify it, the browser will consider the NPM package (from node_modules forlder). ./ needed if you want to say: "This is one of my files, not a module."

NOTE:

For a large project problem, I would make a simple BASH script as follows:

 files=`find . -type f` from="from 'modules/" to="from './modules/" for file in $files do sed -i 's/$from/$to/g' $file done
+1
source

IMO, the whole Browserify point was the "ify" modular structure of NodeJS / CommonJS on the server, on the browser / client side. If you think about it this way, then you don’t want to change the behavior of the import / require statement, save "./" to maintain symmetry the way it should be built into the general require syntax in NodeJS. I think this is just good coding practice.

+1
source

I created a gulp adapter for this purpose. It builds modules from the syntax of the Typescript ES6 module using the extensions in the tsconfig.json Typescript project file. The gulp construct then combines all the components into a single, unified javascript collection. I recently ported the towmmv Typescript - Angular application to use the Typescript ES6 syntax, which is compiled and created using TsProject. It is fully documented on the TsProject TodoMVC github site. See if it fits your needs.

0
source

More articles:


All Articles