生成browserify输出和来自ES6模块的System.register（）模块？ [英] Generating both browserify output & System.register() modules from ES6 modules?

问题描述

根据 2ality ，我编码了ES6模块最后的语法示例，没有 .js 后缀。

I have coded ES6 modules as per 2ality's final syntax example, without a .js suffix.

我已经将模块组织成一个 vendor / project 目录层次结构和模块命名方案为系统注册（）模块格式有效地将注册的模块放入相同的命名空间。

I have as well organised the modules into a vendor/project directory hierarchy and module naming scheme as System.register() module format effectively places registered modules into the same namespace.

问题是如果我引用2ality的例子：

The problem is as follows, if I quote 2ality's example:

//------ 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-module-loader （请参阅 example-es6-modules html的 ）。当遇到 import 声明时， .js 后缀似乎自动附加到文件名，而$ code> lib.js 被加载。只要将 System.paths 配置为指向供应商/项目目录的顶部，则ES6模块可以直接在浏览器中执行。

The above works fine directly in the browser, e.g., with traceur and es6-module-loader (see example-es6-modules.html). When the import declaration is encountered a .js suffix seems to be automatically appended to the filename, and lib.js is loaded. As long as System.paths is configured to point to the top of the vendor/project directory then ES6 modules can be executed directly in the browser.

当与 System.register（）模块格式文件时，上述内容也可以正常工作.com / systemjs / builderrel =nofollow> SystemJS构建器（请参阅 示例系统-register.html ）。只要将 baseURL 设置为供应商/项目层次结构的顶部（请参阅 builder.js ）当生成模块时，模块以供应商/项目前缀命名。

The above also works fine when bundling into a single System.register() module format file with SystemJS builder (see example-system-register.html). As long as baseURL is set to the top of the vendor/project hierarchy (see builder.js) when generating the modules then modules are named with a vendor/project prefix.

问题是当我尝试为了在 browserify 的输入中生成CommonJS模块，当执行 traceur 和 es6ify 不附加 .js 后缀到 import 声明中的文件名称，导致以下错误：

The problem is when I attempt to generate CommonJS modules for input to browserify, when carrying out the transform both traceur and es6ify do not append a .js suffix to file names in an import declaration, resulting in errors along 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'

上述错误是因为traceur尚未向 .js 后缀>'gso / eonjs / MomentRecurRule' import declaration。否则会找到该文件。

The above error is because traceur has not added a .js suffix to the 'gso/eonjs/MomentRecurRule' import declaration. Otherwise the file would be found.

如果ES6模块被转载到单独的CommonJS模块，browserify报告等效的错误，找不到要导入的文件 - browserify不会类似地自动添加一个 .js 后缀到导入文件名。

If ES6 modules are transcompiled to individual CommonJS modules browserify reports the equivalent error, cannot find the file to import - browserify does not similarly automatically add a .js suffix to the import filename either.

然后问题是，ES6模块在浏览器中执行，没有一个问题，加载捆绑 System.register（）模块，但如何转换为浏览器可执行文件？

The problem then is, ES6 modules execute in a browser without a problem, load as bundled System.register() modules also, but how to transform to a browser executable?

推荐答案

browserify API 别名模块ID相对路径：

The browserify API aliasing 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);

快速浏览CommonJS以类似于 System的方式解析模块ID字符串.import（）（请参阅RrequireJS 加载JavaScript文件）。然而，browserify需要这个额外的别名步骤。

At a quick glance CommonJS resolves module ID strings in a manner similar to System.import() (see RrequireJS Load JavaScript Files). However browserify requires this additional aliasing step.

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

这篇关于生成browserify输出和来自ES6模块的System.register（）模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！