Question

我已经为我的构建系统转换为npm：没有gulp等。也没有webpack，汇总等，它是基于模块和基础的es6系统。没有捆绑。当然很简单！

显然，我不想为我的运行时前端模块拖动一个node_modules层次结构。并且不想import foo from './node_modules/god/awful/path.js'。所以我想为运行时前端依赖项创建一个顶级目录。

那么如何将我的“依赖项”而不是“devDependencies”复制到顶级目录进行部署？

我有一个可以执行此操作的运行脚本，但它非常混乱，并且node_modules下的包的位置并不总是很明显。也许有一个自动执行此操作的软件包？还是某种漂亮的npm技巧？

Answer 1

好的，我开始比以前更需要这个了，所以我觉得我已经唠叨并且更加清楚我似乎被迫做的事情了。

首先，我没有使用工作流任务管理器，只需在package.json中运行npm脚本。

我的依赖项（npm --save .. not --save-dev）是：

"dependencies": {
  "lzma": "^2.3.0",
  "pako": "^1.0.0",
  "three": "*"
},

..我的脚本cli用于将依赖项提升到顶级libs / dir只是一个巨大的cp：

"build-deps": "cp
node_modules/lzma/src/lzma.js
node_modules/lzma/src/lzma_worker.js
node_modules/pako/dist/pako.min.js
node_modules/three/build/three.js
node_modules/three/build/three.min.js
node_modules/three/examples/js/controls/OrbitControls.js
node_modules/three/examples/js/controls/FlyControls.js
node_modules/three/examples/js/controls/FirstPersonControls.js
node_modules/three/examples/js/libs/stats.min.js
node_modules/three/examples/js/libs/dat.gui.min.js
libs/",

这非常原始：我必须在node_modules中找到依赖项（并不总是很明显）并手动将它们添加到列表中。当然让我想要更少的依赖！：）

我知道凉亭是为“前端”依赖而设计的（-save in npm speak）。但似乎npm对于依赖性来说是完美的，但似乎我需要成为这种原始的。

我在这里缺少什么？你做什么的？

Answer 2

这是我最早尝试使用Node包进行开发时所遇到的问题。我有完全相同的想法：“我可以使用npm为我的项目提供任何我需要的东西，太棒了！”然后尝试管理我如何引用我的每个依赖库。我当时没有正确掌握npm不仅仅是为了帮助我获取依赖关系，它也可以帮助我管理它们。

这是漫长的＆amp;缺少它：你不希望将任何东西从node_modules文件夹复制到其他更人性化的位置。原因有很多，但最大的原因是你不需要需要从node_modules中复制任何内容 - 项目所需的一切就在那里。

当您在ECMAScript 2015+中开发时，您应该只需执行以下操作（对过于简单的代码道歉）：

/* N.B.  These all reside under node_modules, yet I don't 
 *       have to spell out their paths under node_modules: */

import $ from 'jquery';
import _ from 'lodash';
import moment from 'moment';
import NiftyLibrary from 'niftywhatever';

// ... code ...

let $name = $('#name');
let now = moment();

// ... other code ...

换句话说，您的开发环境设置应该只为您处理模块分辨率。您永远不必指定要使用的jQuery库位于“node_modules / jquery / dist / jquery.min.js”。如果你这样做，你应该花一点时间弄清楚你为什么这样做 - 这是不必要的，这是一个时间和大脑吮吸，你宁愿写你的应用程序代码而不是管理你的依赖...不管理node_modules树。

您提到您正在使用ES6模块进行开发，但未使用webpack，gulp，Grunt，汇总或任何其他构建或捆绑工具。您的项目是否打算完全在Node中运行？我问，因为上次我听说大多数浏览器还没有准备好本机运行ES6模块。那么你的模块如何被转换成ES5？也许你正以一种我还没有听说过的新颖方式接近它，但根据我的经验，构建或捆绑工具是必要的。（而且，这很有趣。）

我过去曾经使用过Grunt和RequireJS，但我现在正在使用带有Babel的webpack 3和一些额外的加载器（取决于我正在处理的项目类型）。我使用npm脚本来处理我的顶级任务（运行开发服务器，构建完成的分发包，运行测试等），但我让webpack处理将ES6转换为ES5，翻译Sass样式，预编译Vue的所有业务组件等等。围绕webpack方法进行思考是一件很有意义的事情，但值得付出努力。

也许webpack不适合你的风格 - 公平。但是，您可以使用许多其他工具。他们都需要一点时间来适应他们的方法，但他们都应该能够为你的依赖关系解决模块解析。一旦正确设置了构建环境，它应该不再是开发工作流程的可见部分;您只需按名称引用依赖库，将它们映射到模块局部变量并使用它们。

这有用吗？

编辑：这是特定于webpack的，但是应该有其他捆绑包或构建工具可用的类似选项。

在webpack中，您可以使用copy-webpack-plugin将npm-sourced依赖项复制到单独的文件夹中。这在服务工作者中很有用，例如，执行上下文稍有不同。

Answer 3

我的建议是在安装后脚本中确定依赖项（@frontend/...的范围，并将作用域文件夹符号链接到顶级目录（类似于bower处理向yarn过渡的方式：请参阅https://github.com/sheerun/bower-away）

示例：

...
"dependencies": {
  "@frontend/jquery": "npm:jquery@~3.4.1",
},
"engines": {
  "npm": ">=6.9.0",
  "node": ">=12.10.0"
},
"scripts": {
  "postinstall": "node -e \"try { require('fs').symlinkSync(require('path').resolve('node_modules/@frontend'), 'static/bower', 'junction') } catch (e) { }\""
}

需要NPM> = 6.9才能支持别名。

仅供参考：aliases break audits

使用npm将前端模块复制到顶级目录

3 个答案: