在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
在安装webpack的时候出现问题
这样之后仍然无法使用webpack命令，不知道什么原因，改如何解决
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
都是警告，不是错误，看不懂就忽略吧。
你没加 -g 参数，所以是项目内(目录内)安装，应该这样运行(Windows 为例)
项目内安装的运行方式
.\node_modules\.bin\webpack --version
如果你想在任何地方运行，需要全局安装
npm install -g webpack
在配置了 PATH 的情况下(一般安装 NodeJS 的时候就会配置 PATH)可以直接 webpack 运行。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
全局安装了？
npm install webpack -g
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
指定一下安装版本试试。
项目文件夹安装npm install webpack@2.* --save-dev
全局安装npm install -g webpack@2.*
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：Webpack 中使用的Node.js API - 简书
Webpack 中使用的Node.js API
Node.js API
webpack提供了同Node.js运行时通讯的Node.js API。Node.js API在需要自定义开发或构建流程的场景中很有用。因为所有的日志输出及错误处理都必须人工处理，没办法自动处理。webpack只负责编译功能。因为这个原因配置在webpack()调用中不起任何作用。
Installation
如果想使用Node.js API，需要首先安装webpack。
npm install webpack --save-dev
在Node.js代码中引入webpack 模块。
const webpack = require("webpack");
// Or if you prefer ES2015:
import webpack from "webpack";
导入的webpack方法可以传递并在提供回调函数的情况下运行webapck compiler。
const webpack = require("webpack");
// Configuration Object
}, (err, stats) =& {
if (err || stats.hasErrors()) {
// Handle errors here
// Done processing
err对象不包含编译错误的相关信息，编译的错误信息需要单独通过stats.hasErrors()来获取.err对象只包含webpack相关的错误问题，比如缺少某项配置。
Note可以给webpack function传递一个配置数组:
{ /* Configuration Object */ },
{ /* Configuration Object */ },
{ /* Configuration Object */ }
], (err, stats) =& {
当有多个配置文件时webpack默认是串行处理的，只有在前一个处理完成后，才会处理后一个。如果希望webpack并行处理配置项，可以使用
Compiler Instance
如果不想webpack function中传递回调callback。webpack function会返回Compiler对象。该Compiler实例可以用来触发webpack 运行或构建并监控文件改变。比较像Api。Compiler实例提供以下方法
.run(callback)
.watch(watchOptions, handler)
调用Compiler的run方法，类似上面运行的运行webpack的方法。
const webpack = require("webpack");
const compiler = webpack({
// Configuration Object
compiler.run((err, stats) =& {
调用watch方法，触发webpack runner。并会监控文件的改变(类似CLI: webpack --watch).在webpack监控到改变之后，会重新运行。该函数会返回一个Watching对象。
//函数声明
//watch(watchOptions,callback)
const webpack = require("webpack");
const compiler = webpack({
// Configuration Object
const watching = compiler.watch({
/* watchOptions */
}, (err, stats) =& {
// Print watch/build result here...
console.log(stats);
Watching的配置项详情参见
Close Watching
watch方法返回的Watching对象提供了.close(callback)方法。调用该方法会终止对文件的监控
watching.close(() =& {
console.log("Watching Ended.");
已关闭的或被设位invalidated的watcher不容许再次被运行
Invalidate Watching
手动指定本次编译被废弃，但仍然对文件进行监控。
watching.invalidate(() =& {
console.warn("Invalidated.");
Stats Object
stats对象是webpack回调函数的第二个参数。主要用来显示代码编译过程中的相关信息，主要包括
Errors and Warnings(if any)
Module and Chunk Information
etc.使用这些信息，将格式化后的日志打印到console中。该对象对外提供下面这些方法。stats.hasErrors
用来检测编译期是否有error产生，返回true或false.stats.hasWarnings
用来检测编译期是否有warning产生，返回true或false.stats.toJson
将编译信息作为JSON object返回。options可以是string或object。使用object可以进行细粒度的配置。
stats.toJson("minimal"); // more options: "verbose", etc.
stats.toJson({
assets: false,
hash: true
可用的配置项，参见dev_server中关于stats的配置。
stats.toString(options)
返回格式化后的编译信息(类似CLI 中的输出)。配置参数同stats.toJson(options)一致，除了添加了一个额外的配置
stats.toString({
// Add console colors
colors: true
下面为stats.toString的使用示例
const webpack = require("webpack");
// Configuration Object
}, (err, stats) =& {
if (err) {
console.error(err);
console.log(stats.toString({
chunks: false,
// Makes the build much quieter
colors: true
// Shows colors in the console
Error Handling
为了比较好的处理error，一般需要统计三种类型的error。
严重的webpack错误(错误的webpack配置 .etc)
编译错误(缺modules，语法错误 .etc)
const webpack = require("webpack");
// Configuration Object
}, (err, stats) =& {
//处理webpack本身的error
if (err) {
console.error(err.stack || err);
if (err.details) {
console.error(err.details);
const info = stats.toJson();
//处理代码编译中产生的error
if (stats.hasErrors()) {
console.error(info.errors);
//处理代码编译中产生的warning
if (stats.hasWarnings()) {
console.warn(info.warnings)
// Log result...
Compiling to Memory
webpack将输出文件写到指定的磁盘文件中，如果希望改变输出文件的位置，比如输出到内存，webDAV等，可以通过对Compiler的outputFileSystem配置进行设置。
const MemoryFS = require("memory-fs");
const webpack = require("webpack");
const fs = new MemoryFS();
const compiler = webpack({ /* options*/ });
compiler.outputFileSystem =
compiler.run((err, stats) =& {
// Read the output later:
const content = fs.readFileSync("...");
输出的文件系统需要兼容Node fs模块接口躺下来聊聊前端自动化—node.js、npm、webpack、gulp这些鬼3 months ago5.npm怎么用呢使用npm安装插件：命令提示符执行npm install &name& [-g] [--save-dev]
5.1 &name&：node插件名称。例：npm install gulp-less --save-dev5.2、-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；
非全局安装：将会安装在当前定位目录；
全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；5.3、--save：将保存配置信息至package.json（package.json是node.js的项目配置文件，在初始化文件 npm install 时会根据你配置文件中的条目进行安装）；5.4、-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。5.5、使用npm卸载插件：npm uninstall &name& [-g] [--save-dev]
5.6、使用npm更新插件：npm update &name& [-g] [--save-dev]
npm update [--save-dev]
// 更新全部插件
5.7、查看npm帮助：npm help5.8、当前目录已安装插件：npm lis6.选装 cnpmnpm很慢，那来cnpm吧，果然万能的淘宝，哈哈npm install cnpm -g --registry=https://registry.npm.taobao.org
安装好后看下版本号就可以直接用啦，用法和npm一致，就是npm换成cnpm就好了~三、工具搭建
Gulp、Grunt、webpack、browserify node和npm明白是干什么的了，搭建环境吗，那可以直接开敲代码了吗？no，no，no，你还需要搭建工具：1.Gulp / Grunt
简化前端流程Gulp / Grunt 是工具链、构建工具，它们能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。使用Gulp/Grunt，然后配置你需要的插件，就可以替代手工实现自动化工作。2.browserify / webpack
JS模块化方案browserify / webpack : 是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案。因为它是预编译的，所以不需要在浏览器中加载解释器。你可在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。目前我只接触过gulp+webpack的项目，所以就这两个工具下载安装一下吧：3.gulp与webpack的安装安装gulpnpm install gulp -g
// 全局安装gulp
// 出现版本号即为正确安装
安装webpacknpm install webpack -g
// 全局安装webpack
webpack -v
// 出现版本号即为正确安装
全局安装过后，仍需在项目根目录进行本地安装，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。四、项目架构搭建1.package.json还记得上面说过的package.json嘛？package.json是基于node.js项目必不可少的配置文件，它是存放在项目根目录的普通json文件。可以通过 npm init 来新建一个package.json文件由于本文不是一篇实用性项目构建的流程文章，就不具体展开package.json的写入及配置流程了，我的第一篇blog里面有基于vue-cli的构建，可以参考。这篇文章就是想通过大体的构建过程来弄清楚各部分的功能。2.直接使用脚手架脚手架是什么：stackoverflow上的一个回答是这样的“脚手架”是一种元编程的方法，用于构建基于数据库的应用。许多MVC框架都有运用这种思想。程序员编写一份specification（规格说明书），来描述怎样去使用数据库；而由（脚手架的）编译器来根据这份specification生成相应的代码，进行增、删、改、查数据库的操作。我们把这种模式称为"脚手架"，在脚手架上面去更高效的建造出强大的应用！ 我的理解呢，脚手架就是给你的项目先打个架子，写个框子，然后你按着写入的方式去一点点填充满你的程序。安装vue脚手架npm install
根据webpack创建项目vue init webpack 项目名字&项目名不能用中文&
react的脚手架则是
等，有很多模版可以自己选择，这样就避免了自己构建那么多复杂的流程。五、总结一下搭建环境：node.js 等搭建工具： Gulp、Grunt、webpack、browserify 等框架：React、vue、Angular等库：jQuery、Prototype等插件：太多了……写到这也差不多了，要不然越写越偏，马上就开始建项目了这是……不知道看完这篇文章你明白node，npm这些都是做什么的了吗，其实…… 会用就行了（捂脸）。前端自动化算是前段工程化的开端，然而还有模块化、组件化、规范化等等一系列，路漫漫而修远，脚踏实地慢慢走吧~可能过一阵就会自己练习一个react的项目，到时候会记录下来，然后做一个从头到尾的项目流程。91收藏分享举报文章被以下专栏收录边学边记，有则改之，无则加勉推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&等我写完文章再回来写介绍……&,&permission&:&COLUMN_PUBLIC&,&memberId&:9314651,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&边学边记，有则改之，无则加勉&,&urlToken&:&lynn-blog&,&id&:42413,&imagePath&:&v2-99fbcb7cfcf.jpg&,&slug&:&lynn-blog&,&applyReason&:&0&,&name&:&干了这碗前端酒&,&title&:&干了这碗前端酒&,&url&:&https:\u002F\\u002Flynn-blog&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:22,&avatar&:{&id&:&v2-99fbcb7cfcf&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fv2-99fbcb7cfcf_l.jpg&,&articlesCount&:4},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-4aec4bf8f5c304a4649c7aedfccf7053_r.jpg&,&lastUpdated&:,&imagePath&:&v2-4aec4bf8f5c304a4649c7aedfccf7053.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[225,],&summary&:&每次在文章前面总想bb叨些废话。从3月入门到如今仰头圆月的8月半，5个半月就决定了我未来几年的职业方向甚至说是未来几年的生活重心，选择和遇见真是个奇妙的事情，就像原本不合时宜的胃疼和恰如其分而来的草莓味奥利奥…… 在学习前端的前两个半月，按部就…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T23:07:06+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:3581090,&withContent&:false,&slug&:,&bigTitleImage&:true,&title&:&躺下来聊聊前端自动化—node.js、npm、webpack、gulp这些鬼&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:0,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-4aec4bf8f5c304a4649c7aedfccf7053_r.jpg&,&author&:{&bio&:&空有一颗想做厨子心的程序员&,&isFollowing&:false,&hash&:&c6e880d996f5fb737a7e2f&,&uid&:04,&isOrg&:false,&slug&:&yu-qun-20-98&,&isFollowed&:false,&description&:&有梦想 就可以玩世不恭&,&name&:&鱼群&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyu-qun-20-98&,&avatar&:{&id&:&v2-ff895dde0be0bc769698&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:9314651,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:764321}],&title&:&躺下来聊聊前端自动化—node.js、npm、webpack、gulp这些鬼&,&author&:&yu-qun-20-98&,&content&:&\u003Cp\u003E 每次在文章前面总想bb叨些废话。从3月入门到如今仰头圆月的8月半，5个半月就决定了我未来几年的职业方向甚至说是未来几年的生活重心，选择和遇见真是个奇妙的事情，就像原本不合时宜的胃疼和恰如其分而来的草莓味奥利奥……\u003C\u002Fp\u003E\u003Cp\u003E 在学习前端的前两个半月，按部就班的html、css、js、jq，恩，页面很好看了。然而一个周末的vue课程，当超哥带我们敲下cmd打开这个小小的黑框子时世界就不一样了，哦，当时并没有被node.js这项伟大的发明折服，而是在接下的时间内被不断地折磨，包括初入公司打开terminal配置的那一堆php乱七八糟的东西，这tm什么鬼，我们好好打开atom敲个html页面配个css，js文件不就好了吗？ok、ok，我用……直到一次在公司做项目调接口一直报错，还是php的错，拖了很久，结果是我重启电脑没有kill掉php5.6版本的原因。你在工作的时候就不再是学生了，不会 就是你的错，可能你确实是不知道，但你总不能拿”也没人告诉我啊“这种理由过一辈子。所以，环境的搭建及使用，这些node.js、npm、webpack、gulp是什么鬼，就自己来学习一下吧。\u003C\u002Fp\u003E\u003Cp\u003E 文化的输出总会包含着个体自我的主观认知，下面的内容，基于我目前知识的局限性，无法保证纯粹的准确性，就简单讲一讲我的理解：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E一、什么是前端自动化，前端自动化能干什么？\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E 你是敲代码的没错，你是一名开发人员，你的工作是创造而不是重复，那就节省出这些时间来进入前端自动化的时代：\u003C\u002Fp\u003E\u003Cp\u003E1.自动编译（将less，sass等自动编译）\u003C\u002Fp\u003E\u003Cp\u003E2.自动合并（将页面引入的多个js文件，或者css文件，合并为同一个且压缩）\u003C\u002Fp\u003E\u003Cp\u003E3.自动刷新（IDE保存，浏览器不用刷新，自动看到效果）\u003C\u002Fp\u003E\u003Cp\u003E4.自动部署（自动将项目打包部署到指定目录）\u003C\u002Fp\u003E\u003Cp\u003E5.自动同步（能够方便实现多个浏览器窗口，同步点击，输入，调试）\u003C\u002Fp\u003E\u003Cp\u003E既然前端自动化这么好，那就从开始吧。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E下面以环境搭建=&工具搭建=&项目架构搭建来把这些鬼简单介绍一下：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E二、环境搭建
Node.js与npm\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ci\u003E1.Node.js环境搭建：\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003E Node.js是一个基于Chrome V8引擎的javascript的运行环境，其特点是单线程、事件驱动，非阻塞I\u002FO模型，非常轻便高效，其包管理工具npm，是全球最大的开源库生态系统。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ci\u003E2.Node.js是做什么的呢：\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003E 本来浏览器在显示我们看到的网站的时候，会做很多事情，页面渲染，js渲染等等，然后node把其中js渲染的引擎拿出来，并且使用了谷歌的V8，然后在其外面又封装了一层api，让其拥有了文件读写，网络等操作，提供了一个服务端的运行环境，但却是运行的javascipt。所以说node.js给前端开发行业带来了一场工业革命。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ci\u003E3.NPM是什么：\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003E NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E允许用户从NPM服务器下载别人编写的第三方包到本地使用。\u003C\u002Fli\u003E\u003Cli\u003E允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。\u003C\u002Fli\u003E\u003Cli\u003E允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Ci\u003E4.Node.js与npm的安装：\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003E 打开\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fnodejs.org\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Enode.js官网\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E去下载吧~安装好的node会自带npm。\u003C\u002Fp\u003E\u003Cp\u003E 打开命令提示符，执行下面两句，看一下版本号就可以了：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Enode -v
\u002F\u002F 查看当前node版本\nnpm -v
\u002F\u002F 查看当前npm版本\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Ci\u003E5.npm怎么用呢\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003E使用npm安装插件：命令提示符执行\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Enpm install &name& [-g] [--save-dev]\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E5.1\u003Cb\u003E &name&\u003C\u002Fb\u003E：node插件名称。例：\u003Cb\u003Enpm install gulp-less --save-dev\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E5.2、\u003Cb\u003E-g\u003C\u002Fb\u003E：全局安装。将会安装在C:\\Users\\Administrator\\AppData\\Roaming\\npm，并且写入系统环境变量；
非全局安装：将会安装在当前定位目录；
全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；\u003C\u002Fp\u003E\u003Cp\u003E5.3、\u003Cb\u003E--save\u003C\u002Fb\u003E：将保存配置信息至package.json（package.json是node.js的项目配置文件，在初始化文件 npm install 时会根据你配置文件中的条目进行安装）；\u003C\u002Fp\u003E\u003Cp\u003E5.4、\u003Cb\u003E-dev\u003C\u002Fb\u003E：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express\u002Fejs\u002Fbody-parser等等。\u003C\u002Fp\u003E\u003Cp\u003E5.5、使用npm卸载插件：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Enpm uninstall &name& [-g] [--save-dev]
\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E5.6、使用npm更新插件：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Enpm update &name& [-g] [--save-dev] \nnpm update [--save-dev]
\u002F\u002F 更新全部插件\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E5.7、查看npm帮助：\u003Cb\u003Enpm help\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E5.8、当前目录已安装插件：\u003Cb\u003Enpm lis\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ci\u003E6.选装 cnpm\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003Enpm很慢，那来cnpm吧，果然万能的淘宝，哈哈\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Enpm install cnpm -g --registry=https:\u002F\u002Fregistry.npm.taobao.org\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E安装好后看下版本号就可以直接用啦，用法和npm一致，就是npm换成cnpm就好了~\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E三、工具搭建
Gulp、Grunt、webpack、browserify \u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003Enode和npm明白是干什么的了，搭建环境吗，那可以直接开敲代码了吗？no，no，no，你还需要搭建工具：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ci\u003E1.Gulp \u002F Grunt
\u003Cb\u003E简化前端流程\u003C\u002Fb\u003E\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003EGulp \u002F Grunt 是工具链、构建工具，它们能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。使用Gulp\u002FGrunt，然后配置你需要的插件，就可以替代手工实现自动化工作。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ci\u003E2.browserify \u002F webpack
\u003Cb\u003EJS模块化方案\u003C\u002Fb\u003E\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003Ebrowserify \u002F webpack : 是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案。因为它是预编译的，所以不需要在浏览器中加载解释器。你可在本地直接写JS，不管是 AMD \u002F CMD \u002F ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。\u003C\u002Fp\u003E\u003Cp\u003E目前我只接触过gulp+webpack的项目，所以就这两个工具下载安装一下吧：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ci\u003E3.gulp与webpack的安装\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003E安装gulp\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Enpm install gulp -g
\u002F\u002F 全局安装gulp\ngulp -v
\u002F\u002F 出现版本号即为正确安装\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E安装webpack\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Enpm install webpack -g
\u002F\u002F 全局安装webpack\nwebpack -v
\u002F\u002F 出现版本号即为正确安装\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E全局安装过后，仍需在项目根目录进行本地安装，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E四、项目架构搭建\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E1.package.json\u003C\u002Fp\u003E\u003Cp\u003E还记得上面说过的package.json嘛？package.json是基于node.js项目必不可少的配置文件，它是存放在项目根目录的普通json文件。\u003C\u002Fp\u003E\u003Cp\u003E可以通过 npm init 来新建一个package.json文件\u003C\u002Fp\u003E\u003Cp\u003E由于本文不是一篇实用性项目构建的流程文章，就不具体展开package.json的写入及配置流程了，我的第一篇blog里面有基于vue-cli的构建，可以参考。这篇文章就是想通过大体的构建过程来弄清楚各部分的功能。\u003C\u002Fp\u003E\u003Cp\u003E2.直接使用脚手架\u003C\u002Fp\u003E\u003Cp\u003E脚手架是什么：stackoverflow上的一个回答是这样的\u003C\u002Fp\u003E\u003Cp\u003E“脚手架”是一种元编程的方法，用于构建基于数据库的应用。许多MVC框架都有运用这种思想。程序员编写一份specification（规格说明书），来描述怎样去使用数据库；而由（脚手架的）编译器来根据这份specification生成相应的代码，进行增、删、改、查数据库的操作。我们把这种模式称为\&脚手架\&，在脚手架上面去更高效的建造出强大的应用！ \u003C\u002Fp\u003E\u003Cp\u003E我的理解呢，脚手架就是给你的项目先打个架子，写个框子，然后你按着写入的方式去一点点填充满你的程序。\u003C\u002Fp\u003E\u003Cp\u003E安装vue脚手架\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Enpm install
vue-cli \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E根据webpack创建项目\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evue init webpack 项目名字&项目名不能用中文&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003Ereact的脚手架则是 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Ffacebookincubator\u002Fcreate-react-app\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ecreate-react-app\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 等，有很多模版可以自己选择，这样就避免了自己构建那么多复杂的流程。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E五、总结一下\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E搭建环境：node.js 等\u003C\u002Fp\u003E\u003Cp\u003E搭建工具： Gulp、Grunt、webpack、browserify 等\u003C\u002Fp\u003E\u003Cp\u003E框架：React、vue、Angular等\u003C\u002Fp\u003E\u003Cp\u003E库：jQuery、Prototype等\u003C\u002Fp\u003E\u003Cp\u003E插件：太多了……\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E写到这也差不多了，要不然越写越偏，马上就开始建项目了这是……不知道看完这篇文章你明白node，npm这些都是做什么的了吗，其实…… 会用就行了（捂脸）。前端自动化算是前段工程化的开端，然而还有模块化、组件化、规范化等等一系列，路漫漫而修远，脚踏实地慢慢走吧~可能过一阵就会自己练习一个react的项目，到时候会记录下来，然后做一个从头到尾的项目流程。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T15:07:06.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:37,&collapsedCount&:0,&likeCount&:91,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-4aec4bf8f5c304a4649c7aedfccf7053_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端入门&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端工程化&}],&adminClosedComment&:false,&titleImageSize&:{&width&:1733,&height&:1733},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:37,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T23:07:06+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&码农互联网学生&,&isFollowing&:false,&hash&:&d06f496abd1a96b8d047e&,&uid&:963300,&isOrg&:false,&slug&:&yang-guang-35-53&,&isFollowed&:false,&description&:&&,&name&:&阳光&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyang-guang-35-53&,&avatar&:{&id&:&v2-6a40a8bc96c1a3224cae&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&程序猿&,&isFollowing&:false,&hash&:&c8b5cde13ca&,&uid&:789400,&isOrg&:false,&slug&:&wang-chao-qun-168&,&isFollowed&:false,&description&:&&,&name&:&王超群168&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwang-chao-qun-168&,&avatar&:{&id&:&v2-7bbf58b51547afbacf8b42&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&进来看看&,&isFollowing&:false,&hash&:&4a31bb4c00f9a2b880d7f8&,&uid&:96,&isOrg&:false,&slug&:&ji-lin-26-89&,&isFollowed&:false,&description&:&&,&name&:&纪林&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fji-lin-26-89&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&飞船租售 \u002F 星际船票代理 \u002F 三体系统运维&,&isFollowing&:false,&hash&:&ef73c38ec0bc766fff69fdd&,&uid&:88,&isOrg&:false,&slug&:&yushiying&,&isFollowed&:false,&description&:&晕船&,&name&:&atoi&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyushiying&,&avatar&:{&id&:&36e67a9f49fd14be76cec&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&程序员&,&isFollowing&:false,&hash&:&f90f3c7c21996dbc22d1f0&,&uid&:763600,&isOrg&:false,&slug&:&zhong-li-jun-12-26&,&isFollowed&:false,&description&:&&,&name&:&钟李俊&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fzhong-li-jun-12-26&,&avatar&:{&id&:&v2-cf49cab043cc960a2d8176&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&每次在文章前面总想bb叨些废话。从3月入门到如今仰头圆月的8月半，5个半月就决定了我未来几年的职业方向甚至说是未来几年的生活重心，选择和遇见真是个奇妙的事情，就像原本不合时宜的胃疼和恰如其分而来的草莓味奥利奥…… 在学习前端的前两个半月，按部就…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&annotationDetail&:null,&commentsCount&:37,&likesCount&:91,&FULLINFO&:true}},&User&:{&yu-qun-20-98&:{&isFollowed&:false,&name&:&鱼群&,&headline&:&有梦想 就可以玩世不恭&,&avatarUrl&:&https:\u002F\\u002F50\u002Fv2-ff895dde0be0bc769698_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&yu-qun-20-98&,&bio&:&空有一颗想做厨子心的程序员&,&hash&:&c6e880d996f5fb737a7e2f&,&uid&:04,&isOrg&:false,&description&:&有梦想 就可以玩世不恭&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyu-qun-20-98&,&avatar&:{&id&:&v2-ff895dde0be0bc769698&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&nwebStickySidebar&:&sticky&,&newMore&:&new&,&liveReviewBuyBar&:&live_review_buy_bar_2&,&liveStore&:&ls_a2_b2_c1_f2&,&isOffice&:&false&,&homeUi2&:&default&,&answerRelatedReadings&:&qa_recommend_with_ads_and_article&,&remixOneKeyPlayButton&:&headerButton&,&asdfadsf&:&asdfad&,&qrcodeLogin&:&qrcode&,&newBuyBar&:&livenewbuy3&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&zcmLighting&:&zcm&,&favAct&:&default&,&appStoreRateDialog&:&close&,&mobileQaPageProxyHeifetz&:&m_qa_page_nweb&,&iOSNewestVersion&:&4.2.0&,&default&:&None&,&wechatShareModal&:&wechat_share_modal_show&,&qaStickySidebar&:&sticky_sidebar&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&experiment&}},&columns&:{&next&:{}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}