产生从ES6模块既browserify输出&System.register()模块?(Generat

2019-10-22 20:15发布

我已编码ES6模块按照2ality的最后的语法例子中,没有一个.js后缀。

我曾经也组织模块为供应商/工程目录层次结构和模块的命名方案为System.register()模块格式有效的地方注册模块集成到同一个命名空间。

问题是如下,如果我引用2ality的例子:

//------ 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

上述工程直接在浏览器,例如细,与traceur和ES6模块加载器 (参见example-es6-modules.html )。 当import报关遇到.js后缀似乎被自动添加到文件名, lib.js被加载。 只要System.paths被配置为指向到供应商/项目目录然后ES6模块可以直接在浏览器中执行的顶部。

捆绑成一个单一的时上述的组合也能正常工作System.register()与模块格式文件SystemJS助洗剂 (参见example-system-register.html )。 只要baseURL被设定为销售商/项目分层结构的顶部(参见builder.js )生成模块然后模块命名与供应商/项目前缀时。

问题是,当我尝试生成CommonJS的模块输入browserify ,当执行变换都traceures6ify不追加.js后缀的为文件名import报关,导致大意如下错误:

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

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

上述错误是因为traceur还没有添加一个.js后缀为'gso/eonjs/MomentRecurRule'进口报关。 否则,该文件会被发现。

如果ES6模块transcompiled到browserify报告相当于误差个人CommonJS的模块,可以将文件找不到进口- browserify没有类似自动添加一个.js后缀的文件名的进口要么。

问题然后,ES6模块执行在浏览器中没有问题,作为负载捆绑System.register()模块也,但如何变换一个浏览器执行?

Answer 1:

该browserify API为相对路径混叠模块ID:

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);

快速浏览CommonJS的解析模块ID字符串以类似的方式System.import()见RrequireJS 调用JavaScript文件 )。 然而browserify需要这个额外的别名一步。

咕噜-browserify任务:

    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'
        },
    },


文章来源: Generating both browserify output & System.register() modules from ES6 modules?