使用npm和grunt進行開發和生產的Javascript項目結構

我想在項目中構建javascript文件。我已經使用NPM來管理模塊並計劃使用Grunt來連接和壓縮js和css文件以進行部署。使用npm和grunt進行開發和生產的Javascript項目結構

我目前用以下結構

-[project root] 
-- [node modules] :packages such as requirejs, jquery, semantic-ui etc using npm 

--[war] 
---[Dev] 
----[css] multiple css files from modules (Question 2:?) 
----[js] multiple js files from modeuls (Question 2:?) 

- Gruntfile.js :for concatenate and compress  
---[Production] - 
----[css]:This is where the compressed and concatenated css files are kept 
----[js] :This is where the compressed and concatenated js files are kept

問題1：上面的方法來構建項目是否正確？其他任何允許管理軟件包，開發和生產文件的建議。

問題2：NPM或其他工具是否允許我從[node modules]文件夾中提取js和css文件，並將它們放在（dev >> css或dev >> js）文件夾中？如果我手動這樣做，我如何跟蹤版本？似乎我在這裏錯過了一些東西，必須有更好的解決方案。

建議/意見/建議非常感謝。

感謝

來源

2015-11-14 maxkart

的問題是，這麼格式有點太寬，但一般的結構是好的。您不需要複製node_modules中的文件，您可以在js下擁有自己的JavaScript文件，並將其導入/請求它們到您自己的文件中。

//foo.js 
//ES6 style imports 
import {Foo as Bar} from "biz"; 

//Common JS style requires 
var Bar = require("biz"); 

//AMD style requires 
require(["biz"], function (Bar) {

如果你想用你的node_modules在瀏覽器中，你要使用Browserify，Webpack，Rollup或類似的捆綁他們。要自動執行此操作，您可以輕鬆使用Grunt tasks such as grunt-browserify和grunt-watch。

同樣適用於你的CSS文件：您存儲css下自己的文件，如果你從node_modules需要CSS文件，您可以將其導入到自己的文件：如果您使用的是一些預處理（如SASS或以下）時，預處理程序通常在構建.css文件時內聯您的導入。例如，如果您僅使用普通的.css文件，請參閱grunt-css-import。

來源

2015-11-14 22:28:41

使用npm和grunt進行開發和生產的Javascript項目結構

回答

相關問題