如何在单独的包中构建我自己的 JS 模块？答案

【问题标题】：How to build my own JS modules in a separate bundle?如何在单独的包中构建我自己的 JS 模块？
【发布时间】：2017-09-14 13:05:23
【问题描述】：

我正在关注this 示例和许多其他类似示例，以将供应商捆绑包与主 JS 文件分开。我有一个多入口点应用程序。所以我将有 N 个 HTML 文件，如下所示

[articles.html]

<script type="text/javascript" src="vendor.js" charset="utf-8"></script>
<script type="text/javascript" src="articles.js" charset="utf-8"></script>

[categories.html]

<script type="text/javascript" src="vendor.js" charset="utf-8"></script>
<script type="text/javascript" src="categories.js" charset="utf-8"></script>

等等。我也有自己的模块。我希望我自己的模块代码不要重复到articles.js、categories.js 等中。而是捆绑或与供应商捆绑或在单独的捆绑中。例如

[articles.html]

<script type="text/javascript" src="vendor.js" charset="utf-8"></script>
<script type="text/javascript" src="mySharedModules.js" charset="utf-8"></script>
<script type="text/javascript" src="articles.js" charset="utf-8"></script>

所以，按照 the commonly accepted method to build vendor bundle 的样子，我将 gulpfile 修补为类似

const mymod = ['./src/js/mod1.js', './src/js/mod2.js'];

gulp.task('build:mymod', function() {
    const b = browserify();

    mymod .forEach(function(lib) {
        b.require(lib);
    });

    b.bundle()
        .pipe(source('mySharedModules.js'))
        .pipe(buffer())
        .pipe(gulp.dest('./dist/'));
});

它的构建没有错误，但我必须指定的源路径（我不知道其他方式来引用我自己的模块，因为它不是 NPM 模块......）是硬编码的：

...
},{"../mod1.js":"/src/js/mod1.js","jquery":"jquery"}],2:
[function(require,module,exports){
var l = require("../mod1.js");
...

当然，路径“/src/js/mod1.js”在“dist”目录中没有意义。事实上我得到一个错误：找不到模块“/src/js/mod1.js”。

捆绑我自己的共享 JS 模块的正确方法是与供应商的模块捆绑还是单独捆绑？

谢谢

【问题讨论】：

标签： javascript node.js gulp browserify

【解决方案1】：

您的问题可能在于b.require 的使用。尝试使用所需文件传递 expose 选项。

https://github.com/substack/node-browserify#brequirefile-opts

const mymod = [
  {file: './src/js/mod1.js', expose: 'mod1'},
  {file: './src/js/mod2.js', expose: 'mod2'}
];

gulp.task('build:mymod', function() {
    const b = browserify();

    b.require(mymod); // pass array of files w/ 'expose' property

    b.bundle()
        .pipe(source('mySharedModules.js'))
        .pipe(buffer())
        .pipe(gulp.dest('./dist/'));
});

根据文档，require('mod1') 和 require('mod2') 现在应该在 mySharedModules.js 捆绑包之外启用。

【讨论】：