javascript - AngularJS + TypeScript + ES6 modules: how to bundle for browser? - Stack Overflow

admin管理员组

文章数量:1422048

I'm using Angular, TypeScript, and the ES6 module syntax. Let's suppose I have a module defined as follows:

// SubModule.ts
import MyService from 'services/MyService';

export default angular.module('subModule', [])
    .service('myService', MyService);

The piled JavaScript would be:

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

My app depends on that module. So I have the following in the App.ts file:

// App.ts
import SubModule from 'modules/SubModule';

angular.module('app', [SubModule.name]);

With the following piled JavaScript:

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

So, now I'm trying to bundle this for the browser. I'm currently trying to use Browserify, but I'm willing to use any bundling tool available. Browserify gives me an error such as:

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

So how do I make Browserify work? Or is there another tool that would work better? I found this issue on Github that seems to say that default exports from TypeScript aren't interoperable with CommonJS. So what do I do?

---

EDIT So I think I've found the problem. Browserify requires that local paths start with ./. So, for example, I would need to reference my sub-module as follows:

import SubModule from './modules/SubModule';

Does anybody know of a Browserify plugin that will automatically look for a relative path even if I don't specify ./? My app is rather large, and I don't want to have to go through and modify all import statements.

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

I'm using Angular, TypeScript, and the ES6 module syntax. Let's suppose I have a module defined as follows:

// SubModule.ts
import MyService from 'services/MyService';

export default angular.module('subModule', [])
    .service('myService', MyService);

The piled JavaScript would be:

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

My app depends on that module. So I have the following in the App.ts file:

// App.ts
import SubModule from 'modules/SubModule';

angular.module('app', [SubModule.name]);

With the following piled JavaScript:

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

So, now I'm trying to bundle this for the browser. I'm currently trying to use Browserify, but I'm willing to use any bundling tool available. Browserify gives me an error such as:

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

So how do I make Browserify work? Or is there another tool that would work better? I found this issue on Github that seems to say that default exports from TypeScript aren't interoperable with CommonJS. So what do I do?

---

EDIT So I think I've found the problem. Browserify requires that local paths start with ./. So, for example, I would need to reference my sub-module as follows:

import SubModule from './modules/SubModule';

Does anybody know of a Browserify plugin that will automatically look for a relative path even if I don't specify ./? My app is rather large, and I don't want to have to go through and modify all import statements.

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

• javascript
• angularjs
• typescript
• browserify
• typescript1.5

Share Improve this question Follow edited May 19, 2015 at 22:28 battmanz asked May 19, 2015 at 20:52 battmanzbattmanz 2,29644 gold badges2525 silver badges3434 bronze badges 1

• Regarding the ./ problem you could have a look at github./substack/browserify-handbook#avoiding- – hgoebl Commented Sep 29, 2015 at 19:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can use JSPM/Systemjs to load modules asynchronously like:

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

and systemjs-builder to create bundles with mandline tool (jspm-cli)

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

or with 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 full working example: https://github./b091/ts-skeleton

If you do not specify it, browserify will look into NPM packages (from node_modules forlder). The ./ is needed if you want to say "It is one of my files, not a module."

NOTE:

For the problem of a big project, I would do a simple BASH script like this :

files=`find . -type f`
from="from 'modules/"
to="from './modules/"

for file in $files
do 
    sed -i 's/$from/$to/g' $file
done

IMO, the whole point of Browserify was to "ify" the NodeJS / CommonJS modular structure on the server, over to the browser / client-side. If you think of it like that, then you wouldn't want to change the behavior of the import/require statement, keep the "./", so you maintain the symmetry as it should be inline with the mon require syntax in NodeJS. I think it's just good coding practice.

I created a gulp adaptor for exactly this purpose. It builds module bundles from Typescript ES6 module syntax using extensions in the tsconfig.json typescript project file. The gulp build then puts all the ponents together into a single bined javascript bundle. I've recently ported the Typescript-Angular todoMVC app to use typescript ES6 syntax which is piled and build with TsProject. It is fully documented on the TsProject TodoMVC github site. Please see if it meets your needs.

本文标签： javascriptAngularJSTypeScriptES6 modules how to bundle for browserStack Overflow