使用纯 npm 脚本创建 vendor.js 包

Question

我正在尝试在没有 Grunt 或 Gulp 的情况下构建 javascript 应用程序的现代方法。我正在通过使用 package.json 中的 scripts 关键字来创建我的构建实用程序。

效果很好，但我运行遇到了挑战。有没有一种好方法可以创建单独的 vendor.js 和 app.js 包，而无需在 browserify 命令中明确显示每个依赖项（或者将 dep 列表传递给 browserify 命令）？

比以下更好的东西：

"dependencies": {
   "react": "latest",
   "react-dom": "latest",
   "redux": "latest",
   "d3": "latest"
},
"devDependencies": {
   "browserify": "latest" 
},
"scripts": {
   "vendor": "browserify -r react -r react-dom -r redux -r d3 > vendor.js",
   "app": "browserify -x react -x react-dom -x redux -x d3 ./app/main.js > app.js"
}

最好，我会回收存储在dependencies关键字中的信息。显然，我不希望我的代码中未使用 bundle devDependencies 或依赖项（即使后者可以通过良好维护需求来避免）。

Answer 1

是的，这是可能的。解决方案是否非常优雅，我将由您决定。基本上它可以归结为如下内容（不完整，尚未调用 browserify）片段：

  "scripts": {
      "init": "npm ls -json --depth 0 | jq .dependencies | jq keys[]",
      "vendor": "npm run --silent init | sed 's/\(.*\)/-r \1/g' | xargs"
  },

初始化脚本用于提取依赖项。供应商脚本调用此脚本，并将其转换为 browserify 的输入参数。

注意 1：我正在使用 jq 从依赖项树中提取信息。注 2：参数列表的构建也可以在初始化脚本中完成。您将必须提供一个环境变量来区分 -r 或 -x 选项。

使用纯 npm 脚本创建 vendor.js 包

Create vendor.js bundle with pure npm script

javascript

node.js

browserify