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

Question

我已经转换为npm用于我的构建系统：没有吞咽等。也没有webpack，汇总等，这是一个es6系统基于模块&没有捆绑。当然很简单！

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

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

我有一个可以做到这一点的运行脚本，但它非常混乱，node_modules下的包的位置并不总是很明显。也许有自动执行此操作的程序包？或者某种漂亮的npm技巧？

Answer 1

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

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

我的依赖（NPM --save ..不--save-DEV）是：

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

..和我的脚本的CLI提升依赖成顶级库/ 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的依赖关系（并不总是显而易见的），并用手将它们添加到列表中。当然，让我想要更少的依赖！ :)

我知道，鲍尔是专为“前端”的依赖项（保存npm说）。但似乎npm对于依赖关系来说是完美的，但是看起来我需要成为这个原始的。

我在这里错过了什么？你是做什么？

Answer 2

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

以下是很长的&的缺点：您不希望将任何东西从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 with RequireJS，但现在使用webpack 3和Babel以及一些额外的加载器（取决于项目类型I'米工作）。我使用npm脚本来处理我的顶级任务（运行开发服务器，构建完成的分发包，运行测试等），但是我让webpack处理将ES6转换为ES5的所有业务，转换Sass样式，预编译Vue组件等等。围绕webpack方法打包自己的想法有点工作量，但这非常值得。

也许webpack不适合你的风格 - 够公平的。但还有其他一些工具可以用来代替。他们都需要一点时间才能适应他们的方法，但他们都应该能够为您的依赖关注模块解决方案。一旦你建立了正确的构建环境，它应该停止成为你开发工作流程的可见部分;您只需通过名称引用相关库，将它们映射到模块局部变量并使用它们。

对您有帮助吗？

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

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