Question

我正在跟踪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的内容，我将gulp文件修补为类似

的内容

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模块的正确方法是哪种方式，可以与供应商的模块捆绑在一起，也可以单独捆绑？

谢谢

Answer 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捆绑包之外启用。

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

1 个答案: