使用 npm 和 grunt 进行开发和生产的 Javascript 项目结构答案

【问题标题】：Javascript project structure for dev and production using npm and grunt使用 npm 和 grunt 进行开发和生产的 Javascript 项目结构
【发布时间】：2016-02-16 06:13:52
【问题描述】：

我正在尝试在项目中构建 javascript 文件。我已经使用 NPM 管理模块，并计划使用 Grunt 连接和压缩 js 和 css 文件以进行部署。

我目前使用如下结构

-[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) 文件夹中吗？如果手动执行此操作，我如何跟踪版本？好像我在这里遗漏了一些东西，必须有更好的解决方案。

非常感谢您的建议/建议/cmets。

谢谢

【问题讨论】：

标签： javascript css node.js gruntjs npm

【解决方案1】：

这个问题对于 SO 格式来说有点太宽泛了，但总的来说你的结构是好的。您无需从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 或 LESS )，预处理器通常在构建.css-文件时内联您的导入。如果您只是使用普通的 .css 文件，请参阅 grunt-css-import 示例。

【讨论】：