一、工程化描述
前端工程化概述
定义：降低成本，提高效率（性能、稳定性、可用性、维护性）的事情的统称。
工程化要解决的问题
- 提高前端工程师的开发效率
js、html、css语言能力的提升
减少重复工作
模块化、组件化
功能复用和变更
开发和产品环境差异带来的问题
发布流程问题
- 多人高效写作
- 项目的可维护性
- 提高开发质量
发展历程
库/框架选型（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
官方文档版本
安装的版本 - 最基础的打包
- 文件结构如下
└─webpack_demo
entry.js - 打包文件是js文件
- 输入
webpack entry.js -o bundle.js --mode=development
- 注意：
--mode=development是webpack4才有的，默认是--mode=production。前者不会压缩，后者会进行压缩。 - 打包之后文件结构
└─webpack_demo
bundle.js
entry.js - 新建html文件，用script标签引入bundle.js文件即可
- 有依赖关系的打包
- 文件结构
└─webpack_demo
entry.js
module.js - 打包文件都是js文件，entry.js中引入了module.js
- 输入即可打包
webpack entry.js -o bundle.js --mode=development
- 其余同上
- 非js文件的打包 -- 举例：样式文件的打包
- 文件结构
└─webpack_demo
entry.js
style.css - 在打包之前，先用npm安装对应的loader。只有安装了loader，webpack才能打包对应的非js文件。
npm i style-loader css-loader -D
- 没有配置文件
修改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"
- 有配置文件
首先，输入如下命令，生成配置文件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搭建项目
- 文件结构
└─webpack_vue
│ package.json （npm init -y生成）
│ webpack.config.js （配置文件）
│
└─src
app.vue （根组件）
main.js （入口文件）
template.html （静态入口文件） -
npm i vue vue-loader -D
vue-loader 允许单文件组件的格式写代码，即 .vue -
npm i webpack-dev-server -D
webpack-dev-server - 小型node.js服务器 -
npm i html-webpack-plugin -D
html-webpack-plugin - 生成html5文件 - 配置如下
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
前端组件化 【趋势】
前端规范化
前端自动化
二、模块化
三、代码规范
编辑器 项目配置
- eslint插件
- .editconfig配置文件
- .prettierrc配置文件
eslint
- 概念：javascript代码检测工具，帮助统一团队的代码风格。内置很多检查规则，支持自定义规则。nodeJs开发，安装方便。
- 基本使用
（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前，必须通过验证
- 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）设置忽略文件
