使用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依賴項複製到單獨的文件夾中。這在服務工作者中很有用，例如執行上下文稍有不同。