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

非常感谢您的建议/建议/意见。

由于

Answer 1

问题对于SO格式来说有点过于宽泛，但总的来说你的结构很好。您可以在node_modules下拥有自己的JavaScript文件，而不是从js复制文件，而是导入/要求它们为您自己的文件。

//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，例如。

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

1 个答案: