Javascript 使用 npm 和 grunt 的开发和生产项目结构

Question

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

Suggestions/recommendations/comments 非常感谢。

谢谢

Answer 1

这个问题对于 SO 格式来说有点太宽了，但总的来说你的结构很好。您无需从 node_modules 复制文件，而是在 js 下拥有您自己的 JavaScript 个文件，并且您 import/require 将它们复制到您自己的文件中。

//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 or similar. To automate this, you can easily use Grunt tasks such as grunt-browserify 和 grunt-watch.

将它们捆绑在一起

同样适用于您的 CSS 文件：您将自己的文件存储在 css 下，如果您需要来自 node_modules 的 CSS 文件，您可以将它们导入到您自己的文件中文件：如果您正在使用一些预处理器（例如 SASS 或 LESS），预处理器通常会在构建 .css 文件时内联您的导入。如果您只是使用普通 .css 文件，请参阅 grunt-css-import 例如。

Javascript 使用 npm 和 grunt 的开发和生产项目结构

Javascript project structure for dev and production using npm and grunt

javascript

css

node.js

npm

gruntjs