Vue系列之WebPack与Eslint

上一篇文章，我们在window上搭建了vue的开发环境，windows下搭建vue开发环境，并且创建了项目，我们看到了vue项目的目录结构。工欲善其事，必先利其器，在创建项目的过程中，我们使用了webpack和eslint工具，这一节我们就来讲讲这两个工具。

一、Webpack

1.Webpack是什么

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

webpack打包流程

2.Webpack 的特点

1）代码拆分

Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。

2）Loader

Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

3）智能解析

Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式

require("./templates/" + name + ".jade")

4）插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

5）快速运行

Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

更加细致的解读，请大家参考http://webpackdoc.com/。

3.Vue项目中的Webpack举例

Webpack 在执行的时候可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的

webpack.config.js

在我们上一节新建的vue工程目录下：

我们可以看到webpack.base.conf.js文件，这个文件就是我们使用vue init的模板创建的webpack配置文件。在package.json里，已经添加了webpack的依赖。

打开webpack.base.conf.js:

通过指定entry，webpack可以知道我们的工程是从哪里开始启动的，非常方便快捷。

entry: {

app: './src/main.js'

}

二、Eslint

1.Eslint是什么

在团队协作中，我们经常会要求团队成员统一代码的风格，会预先制定编码规范，帮助大家规范自己的代码，方便后续的维护。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。

ESLint是一个QA工具，就是用来避免低级错误和统一代码的风格。它由Nicholas C. Zakas 编写， 2013 年发布第一个版本。

2.Eslint的特点

ESLint 主要有以下特点：

• 默认规则包含所有 JSLint、JSHint 中存在的规则，易迁移；

• 规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用；

• 包含代码风格检测的规则（可以丢掉 JSCS 了）；

• 支持插件扩展、自定义规则。

3.Eslint的配置方式

可以通过以下三种方式配置 ESLint:

1）使用 .eslintrc文件（支持 JSON 和 YAML 两种语法）；

2）在 package.json中添加 eslintConfig 配置块；

3）直接在代码文件中定义。

4.Vue项目中的Eslint举例

在我们的vue项目中，我们使用第一种方式，在初始化工程的时候默认开启了Eslint，在.eslintrc文件中配置Eslint。

'arrow-parens': 0，表示的是箭头函数用小括号括起来；

'generator-star-spacing': 0,表示生成器函数*的前后空格

'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0，表示开发环境下使用debugger。

其他规则遵照标准的Eslint规则。

接下来我们看一下工程中的一行代码：

这是我在完整的项目中写的一段js代码，function后面没有空格，这时，保存修改，项目自动编译报错：

原因在于按照Eslint默认的规则，需要在function后面空格在加括号，修改之后即可编译通过。这种方式对于培养我们写代码的规范是非常有帮助的，希望大家从开始就能养成习惯。

以上就是这一节的全部内容，下一节，我们正是进入vue的实战环节。

如果您喜欢我们的文章，点赞就好，欢迎管制我的公众号“充电实践”您的认可是我分享的最大动力。