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

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 的内容，我将 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 模块的正确方法是与供应商的模块捆绑还是单独捆绑？

谢谢

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 模块？

How to build my own JS modules in a separate bundle?

javascript

node.js

browserify

gulp