01 QD工程化

一、工程化描述

前端工程化概述

定义:降低成本,提高效率(性能、稳定性、可用性、维护性)的事情的统称。

工程化要解决的问题

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

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

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

发展历程

库/框架选型(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
  1. 注意: --mode=development是webpack4才有的,默认是--mode=production。前者不会压缩,后者会进行压缩。
  2. 打包之后文件结构
    └─webpack_demo
    bundle.js
    entry.js
  3. 新建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
  1. 其余同上
  • 非js文件的打包 -- 举例:样式文件的打包
  1. 文件结构
    └─webpack_demo
    entry.js
    style.css
  2. 在打包之前,先用npm安装对应的loader。只有安装了loader,webpack才能打包对应的非js文件。
npm i style-loader css-loader -D
  1. 没有配置文件
    修改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"
  1. 有配置文件
    首先,输入如下命令,生成配置文件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前,必须通过验证

  1. 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)设置忽略文件

四、前端自动化

五、构建工具

六、自动化测试

你可能感兴趣的:(01 QD工程化)