01 QD工程化

一、工程化描述

前端工程化概述

定义：降低成本，提高效率（性能、稳定性、可用性、维护性）的事情的统称。

工程化要解决的问题

1. 提高前端工程师的开发效率

js、html、css语言能力的提升
减少重复工作
模块化、组件化
功能复用和变更
开发和产品环境差异带来的问题
发布流程问题

2. 多人高效写作
3. 项目的可维护性
4. 提高开发质量

发展历程

库/框架选型（jquery、zepto、angular、vue）=> 简单构建优化（grunt、gulp） => js/css模块化开发（AMD/CommonJs/UMD/ES6 Less/Sass/Stylus） => 组件化开发与资源管理（分治思想 微信小程序工程化)

前端模块化

为什么模块化？-- 项目越来越大，使用的资源越来越多
模块化要解决的问题？-- 模块的定义、依赖和导出
常用工具？-- webpack parcel rollup

webpack

打包和转化。

1. webpack的基本使用

• 使用之前 npm i webpack webpack-cli -g
  
  

  官方文档版本
  
  
  

  安装的版本
• 最基础的打包

1. 文件结构如下
   └─webpack_demo
   entry.js
2. 打包文件是js文件
3. 输入

webpack entry.js -o bundle.js --mode=development

4. 注意： --mode=development是webpack4才有的，默认是--mode=production。前者不会压缩，后者会进行压缩。
5. 打包之后文件结构
   └─webpack_demo
   bundle.js
   entry.js
6. 新建html文件，用script标签引入bundle.js文件即可

• 有依赖关系的打包

1. 文件结构
   └─webpack_demo
   entry.js
   module.js
2. 打包文件都是js文件，entry.js中引入了module.js
3. 输入即可打包

webpack entry.js -o bundle.js --mode=development

4. 其余同上

• 非js文件的打包 -- 举例：样式文件的打包

1. 文件结构
   └─webpack_demo
   entry.js
   style.css
2. 在打包之前，先用npm安装对应的loader。只有安装了loader，webpack才能打包对应的非js文件。

npm i style-loader css-loader -D

3. 没有配置文件
   修改entry.js

require("!style-loader!css-loader!./style.css") // 载入 style.css

或者 修改打包时的命令

webpack entry.js -o bundle.js --mode=development --module-bind "css=style-loader!css-loader"

4. 有配置文件
   首先，输入如下命令，生成配置文件package.json

 npm init -y

其次，在目录下新建webpack.config.js进行配置

  module.exports = {
    mode: "development", // webpack4 新增
    entry: './entry.js',
    output: {
      path: __dirname,
      filename: 'bundle.js'
    },
    module: {
        rules: [ // webpack3中，此处名为 loaders
        {
            test: /\.css$/,
            use: [
            { loader: "style-loader" },
            { loader: "css-loader" }
            ]
        }
        ]
    }
  }

最后，输入，进行打包

webpack

PS. webpack.config.js是默认配置文件的名称，可以自行更改为其他名称。举例，若是webpack.config.dev.js，则为
其中--progress展示打包进度

webpack --progress --config webpack.config.dev.js

2. webpack结合vue搭建项目

1. 文件结构
   └─webpack_vue
   │ package.json （npm init -y生成）
   │ webpack.config.js （配置文件）
   │
   └─src
   app.vue （根组件）
   main.js （入口文件）
   template.html （静态入口文件）
2. npm i vue vue-loader -D
   vue-loader 允许单文件组件的格式写代码，即 .vue
3. npm i webpack-dev-server -D
   webpack-dev-server - 小型node.js服务器
4. npm i html-webpack-plugin -D
   html-webpack-plugin - 生成html5文件
5. 配置如下
   package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --progress --config webpack.config.js --open --hot"
  },

webpack.config.js

const path = require('path')
// vue-loader要用此插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        template: './template.html' // 指定模板
    })
  ]
}

3. webpack 4.x特性

webpack 4.x 提供了 约定大于配置的概念；目的是为了尽量减少 配置文件的体积；

• 默认约定了：
• 打包的入口是src -> index.js
• 打包的输出文件是dist -> main.js
• 4.x 中 新增了 mode 选项(为必选项)，可选的值为：development 和 production;

parcel

rollup

前端组件化 【趋势】

前端规范化

前端自动化

二、模块化

三、代码规范

编辑器 项目配置

1. eslint插件
2. .editconfig配置文件
3. .prettierrc配置文件

eslint

1. 概念：javascript代码检测工具，帮助统一团队的代码风格。内置很多检查规则，支持自定义规则。nodeJs开发，安装方便。
2. 基本使用
   （1）npm i eslint -g如果执行脚本卸载package.json中，可以不用全局安装；如果要生成eslint的配置文件，必须全局安装
   （2）eslint --init根目录创建.eslintrc.js配置文件
   （3）根目录创建.eslintignore，忽略不需要lint的文件，如dist/
   （4）npm i elslint babel-eslint -D
   （5）在package.json中配置

    "lint": "eslint src", // 进行lint验证
    "fix": "eslint --fix src" // 自动修复 -- 只能修复规则中带有扳手标识的

（6）使用pre-commit，在提交git前，必须通过验证

3. webpack中使用（VUE为例）
   使用vue-cli生成项目时，可以直接配置eslint。或者手工搭建webpack + Vue，手动配置方法如下：
   （1）eslint --init生成配置文件
   （2）安装依赖包npm i eslint babel-eslint eslint-loader eslint-config-standard eslint-plugin-html -D
   （3）npm i eslint-plugin-html -D 解析.vue文件，在.eslintrc.js文件中增加对vue的支持

module.exports = {
    "extends": "standard",
    "plugins": [ //增加对vue的支持
        "html"
    ]
};

（4）webpack.config.dev.js module/rules中配置

      {
        test: /\.(js|vue)$/,
        loader: "eslint-loader",
        exclude: /node_modules/,
        options: {
          // eslint options (if necessary)
        }
      }

(5)package.json的script中配置

    "dev": "webpack-dev-server --progress --config webpack.config.dev.js --open --hot",
    "lint": "eslint --fix src --ext .js,.vue"

（6）设置忽略文件

四、前端自动化

五、构建工具

六、自动化测试