Generating both browser modules and System.register () from ES6 modules?

I have coded ES6 modules to 2ality final example syntax without suffix .js

.

I also organized the modules into a vendor / project directory hierarchy and a module naming scheme, since the module format System.register()

effectively places registered modules in the same namespace.

The problem is this if I give an example with two examples:

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

      

The above works fine in a browser like traceur and es6-module-loader (see example-es6-modules.html

). When an ad is encountered import

, the suffix .js

seems to be automatically appended to the filename and loaded lib.js

. As long as System.paths

set to point to the top of the vendor / project directory then ES6 modules can be executed directly in the browser.

The above also works great when combined into one module format file System.register()

with the SystemJS constructor (see example-system-register.html

). While baseURL

set to the top of the vendor / project hierarchy (see builder.js ) when creating modules, then modules are named with a vendor / project prefix.

The problem is that I am trying to create CommonJS modules for browserify input while doing the conversion as traceur

well as es6ify

not adding a suffix .js

to filenames in the declaration import

, resulting in errors on the following lines:

$ cd src/es6
$ traceur --out ./out.js --modules commonjs gso/eonjs/EonJS.js

Error: File not found '/home/ ... /src/es6/gso/eonjs/MomentRecurRule'

      

The above error is that traceur did not add a suffix .js

to the import declaration 'gso/eonjs/MomentRecurRule'

. Otherwise, the file will be found.

If ES6 modules are transcribed into separate CommonJS modules, then browsers look at the equivalent error, cannot find the file to import - the browser does not automatically add a suffix .js

to the import file name.

The problem is ES6 modules run in the browser without issue, loaded as nested modules System.register()

, but how to convert to browser executable?

+1


source to share


1 answer


loop through API alias module ids for relative paths:

var browserify = require('browserify');

var b = browserify();
b.add('./index.js');

b.require('./gso/eonjs/EonJS.js',  { expose: 'gso/eonjs/EonJS' });
b.require('./gso/eonjs/AbstractRecurRule.js', { expose: 'gso/eonjs/AbstractRecurRule' });
b.require('./gso/eonjs/MomentRecurRule.js', { expose: 'gso/eonjs/MomentRecurRule' });
b.require('./gso/eonjs/RRuleRecurRule.js', { expose: 'gso/eonjs/RRuleRecurRule' });
b.require('./gso/eonjs/RecurRuleContainer.js',  { expose: 'gso/eonjs/RecurRuleContainer' });
b.require('./gso/eonjs/Occurrence.js',  { expose: 'gso/eonjs/Occurrence' });

b.bundle().pipe(process.stdout);

      

At a glance, CommonJS resolves module identifier strings in a similar manner System.import()

(see RrequireJS Load JavaScript Files ). However, the browser requires this extra anti-aliasing step.



grunt-browserify task:

    browserify: {
        options: {  // https://github.com/substack/node-browserify#browserifyfiles--opts
            require: [
                './src/commonjs/build/gso/eonjs/EonJS.js:gso/eonjs/EonJS',
                './src/commonjs/build/gso/eonjs/AbstractRecurRule.js:gso/eonjs/AbstractRecurRule',
                './src/commonjs/build/gso/eonjs/MomentRecurRule.js:gso/eonjs/MomentRecurRule',
                './src/commonjs/build/gso/eonjs/RRuleRecurRule.js:gso/eonjs/RRuleRecurRule',
                './src/commonjs/build/gso/eonjs/RecurRuleContainer.js:gso/eonjs/RecurRuleContainer',
                './src/commonjs/build/gso/eonjs/Occurrence.js:gso/eonjs/Occurrence'
            ]
        },
        debug: {
            debug: true,
            src: './index.js',
            dest: 'src/browserify/eonjs-traceur-debug.js'
        },
    },

      

0


source







All Articles