Browserify --独立于 ES6 模块和多个源文件和导出

Question

我正在尝试使用 Gulp、Browserify 和 Babelify 将多个 ES6 文件编译和转换为单个 JavaScript 库，可以与其他开发人员共享。

我正在尝试使用多个 ES6 源文件，每个文件都使用 ES6 modules using export。我希望它们都像 'namespace' 一样被打包成一个 class/function。

似乎 Browserify's --standalone option 就是为此而设计的，但我只能在只有一个输入文件时让它工作。当有多个导出的源文件时，我无法将它们全部包含在 'namespace' class 中，并且我无法控制最终选择哪个源文件的导出到 'namespace' class。

在这个例子中，a.js 和 b.js 是源文件，我期望它们被捆绑在一个名为 [=17] 'namespace' class 中=].

a.js

export function fromA() {
    console.log('Hello from a.js');
}

b.js

export function fromB() {
    console.log('Hello from b.js');
}

gulpfile.js

const browserify = require('browserify');
const gulp = require('gulp');
const log = require('gulplog');
const plumber = require('gulp-plumber');
const source = require('vinyl-source-stream');

function minimalExample(done) {
    return browserify({
            entries: [
                './src/a.js',
                './src/b.js'
            ],
            standalone: 'TestModule' // output as a library under this namespace using a umd wrapper
        })
        .transform('babelify')
        .bundle()
            .on('error', log.error)
        .pipe(source('minimalExample.js'))
        .pipe(plumber())
        .pipe(gulp.dest('./dist'));
}

module.exports = {
    minimalExample
};

我想要的

我希望 minimalExample.js 有一个名为 TestModule 的对象，它具有函数 fromA() 和 fromB()，这样我就可以调用这两个方法。我应该能够从控制台运行这些命令中的任何一个：

TestModule.fromA()
TestModule.fromB()

实际发生了什么

当我在浏览器中加载 minimalExample.js 时，打开控制台并检查 TestModule 对象，它存在，但缺少 a.js 中的功能。它只有 b.js:

的功能

我是不是漏掉了某个设置？有没有办法让 Browserify 在独立 'namespace' class?

中包含所有导出

更新 1

在@Zydnar 的讨论的提示下，我做了显而易见的事情并实际查看了输出文件，minimalExample.js。我还不明白这些转换是如何工作的或者出了什么问题；我还在看那个。但我确实看到两个输入文件都已转换并包含在输出中。

这里是 actual output, and the same thing but pretty-printed by Chrome.

Answer 1

感谢help on the browserify project on Github，我对此有了一个答案。 Renée Kooi 为我指明了正确的方向。他们说：

If you have multiple entry points, all of them are executed, but browserify doesn't merge modules, which could cause bad unexpected behaviour.

解决方案是使用一个文件作为 Browserify 的入口点，导出您想要导出的所有内容。在 entries 选项中使用该单个文件作为输入源文件。 Browserify 将遍历您应用程序的依赖关系树并包含它所需的依赖关系。入口点文件导出的任何内容都将按预期包含在导出的模块中。

下面是一个完整的例子。 main.js 是入口点文件。

a.js

export function fromA() {
    console.log('Hello from a.js');
}

b.js

export function fromB() {
    console.log('Hello from b.js');
}

main.js（这个是新的）

export * from './a.js';
export * from './b.js';

gulpfile.js

const browserify = require('browserify');
const gulp = require('gulp');
const log = require('gulplog');
const plumber = require('gulp-plumber');
const source = require('vinyl-source-stream');

function minimalExample(done) {
    return browserify({
            entries: [
                './src/main.js'  // THIS LINE HAS CHANGED FROM THE QUESTION
            ],
            standalone: 'TestModule'
        })
        .transform('babelify')
        .bundle()
            .on('error', log.error)
        .pipe(source('minimalExample.js'))
        .pipe(plumber())
        .pipe(gulp.dest('./dist'));
}

module.exports = {
    minimalExample
};

现在，当您运行使用 gulp 执行 minimalExample 任务时，生成的文件将同时具有 TestModule.fromA() 和 TestModule.fromB() 函数。

Browserify --独立于 ES6 模块和多个源文件和导出

Browserify --standalone with ES6 modules and multiple source files and exports

javascript

browserify

ecmascript-6

gulp

babeljs