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

Question

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

效果很好，但我遇到了挑战。有没有一种好方法可以创建单独的 vendor.js 和 app.js bundle ，而无需在 browserify 命令中明确显示每个依赖项(或者将 deps 列表传递给 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 devDependency 或依赖项(即使后者可以通过良好的需求维护来防止)。

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"
  },

init脚本用于提取依赖项。 vendor 脚本调用此脚本，并将其转换为 browserify 的输入参数。

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