写在前面:
人生就是在不停的学习中,keep learning…
希望能将学习的知识进行简单的记录和梳理,一点一点充实自己的知识库
这个系列的初衷是希望能自我总结,自我反思,并且作为以后的参考,如果能小小的帮到他人那就是手有余香啦
如果有任何问题,欢迎指正
【前端工程化】- 0 - Introduction
1. 前端模块化
将系统分离成独立功能部分的方法。
侧重点包括模块的定义,依赖和导出。
优点
- 每个模块有自己独立的焦点和目的
- 方便模块之间的组合和分解
- 方便单个功能的调试
- 方便多人协作,互不干扰
工具
1. Webpack
基本介绍:
- 将源代码打包成可以直接发布上线的静态资源的打包工具。
- 将代码进行分隔,可以实现按需异步加载
- 通过 Loader 将非 JS 文件转换为有效模块,
test
属性用来匹配,use
属性用来定义使用的 loader - 使用 插件 来优化打包,管理资源,注入环境变量等,比如:
HtmlWebpackPlugin
可以生成一个 HTML 文件并注入 bundles
基本使用:
- 安装全局包:
webpack
,webpack-cli
- 打包文件:
webpack entry.js -o bundle.js --mode=development
得到bundle.js
打包后文件- syntax:
webpack 原始文件 -o 打包后生成文件 模式
--mode=developement
:开发环境不会进行压缩,--mode=production
: 生产环境会进行压缩- 需要在项目根目录进行打包
- syntax:
- 在项目根目录创建
index.html
,并导入打包后的bundle.js
文件,然后运行即可
打包非 JS 文件(e.g. css 文件):
默认情况下,webpack 无法识别非 js 的 syntax, e.g. .class{color: white}
,所以需要使用对应的 loader
- 安装 loader:
style-loader
,css-loader
- 打包文件:
- 方法1: 在导入 css 时添加 loader:
require("!style-loader!css-loader!./style.css")
- 方法2:在终端进行统一添加:
webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
- 注意:loader 的匹配执行顺序是从右到左
- 方法1: 在导入 css 时添加 loader:
使用配置文件:
可以简化在终端里重复输入的很长的打包命令
-
在项目根目录下创建
webpack.config.js
配置文件,文件名可以更改,需要在命令中指定,e.g.webpack.config.dev.js
-
在配置文件中进行配置
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 用于访问内置插件 module.exports = { mode: 'production', // 可以启用 webpack 内置的在相应环境的优化,'development', ‘production’ (默认), 'none' entry: './path/to/my/entry/file.js', // 入口起点 output: { path: path.resolve(__dirname, 'dist'), // 指定生成的 bundle 放在 ./dist 文件夹里 filename: 'my-first-webpack.bundle.js' // 指定生成的 bundle 名 }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } // 指定遇到 .txt 结尾的文件,使用 raw-loader 进行转换 ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) // 生成一个 HTML 文件,并自动注入所有的 bundle ] };
在项目中使用:
可以利用 webpack-dev-server
和 html-webpack-plugin
运行项目
-
webpack-dev-server
帮助打包生成bundle.js
- 使用方法:在
package.json
中添加:"dev": "webpack-dev-server --progress --config webpack.config.dev.js --open --hot" // --progress:显示打包进度 // --config webpack.config.dev.js:指定配置文件 // --open 打包完成后自动打开网页文件 // --hot 开启热更新
- 使用方法:在
-
html-webpack-plugin
帮助生成index.html
并自动导入bundle.js
2. Parcel
基本介绍:
- web 应用打包工具
- 使用多核处理以及 cache 提升打包效率
- 开箱即可用的零配置
- 不需要插件对非 JS 文件进行转换和打包
基本使用:
- 安装包:
parcel-bundler
- 创建
index.html
和index.js
文件,以及其他文件,将依赖导入并写好代码 - 打包文件:
parcel index.html
(index.html
是入口 html 文件)
3. Rollup
基本介绍:
- JS 模块打包器,将小块代码编译成复杂的代码,主要用于 Library, 框架或应用程序等
- 主要基于 ES6 语法,在 ES6 模块中支持 tree-shaking
对比:
Webpack | Parcel | |
---|---|---|
配置 | - 需要配置 - 需要安装依赖 - 不能简单自动生成 HTML |
- 无需配置 - 无需依赖 - 能以 HTML 为入口,自动检测打包依赖资源 - 默认支持模块热替换 |
构建速度 | 慢(e.g. 生产环境构建时间:9.58s) - 通过 webpack 插件和 loader 机制拉低性能 - 默认单进程构建 |
快(e.g. 生产环境构建时间:8.31s) - 一体化内置,集成和优化的更好 - 内置多进程并行构建 |
输出 JS 文件大小 | 小(e.g. 274K) - 支持TreeShaking - 文件名使用缩略名 |
大(e.g. 544K) - 不支持TreeShaking - 文件名使用原名 |
sourceMap | 开发模式下支持输出 SourceMap,方便调试 | 开发模式下不输出 SourceMap |
TreeShaking | 可以按需打包,只打包被引用的函数 | 不支持剔除无效代码 |
成熟性 | 足够成熟 | 某些依赖的 npm 模块会让 parcel 运行错误 |
使用场景 | 包括: - 打包发布在 npm 的库 - 构建 node.js 应用 - 构建 Electron 应用 - 构建离线应用(ServiceWorkers) |
限于运行在浏览器的网页 |
其他 parcel 的问题:
- 无法控制对部分文件的特殊处理,以实现诸如按需加载这样的需求;
- 无法控制输出文件名的Hash值和名称;
- 无法控制构建输出目录结构;
- 无法映射路径以缩短导入语句;
- HTTP开发服务器不支持HistoryApi;
对比部分参考: webpack vs parcel