【前端工程化】- 1 - 前端模块化

写在前面：
人生就是在不停的学习中，keep learning…
希望能将学习的知识进行简单的记录和梳理，一点一点充实自己的知识库
这个系列的初衷是希望能自我总结，自我反思，并且作为以后的参考，如果能小小的帮到他人那就是手有余香啦
如果有任何问题，欢迎指正
【前端工程化】- 0 - Introduction

1. 前端模块化

将系统分离成独立功能部分的方法。
侧重点包括模块的定义，依赖和导出。

优点

• 每个模块有自己独立的焦点和目的
• 方便模块之间的组合和分解
• 方便单个功能的调试
• 方便多人协作，互不干扰

工具

1. Webpack

网址：https://webpack.js.org

基本介绍：

• 将源代码打包成可以直接发布上线的静态资源的打包工具。
• 将代码进行分隔，可以实现按需异步加载
• 通过 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： 生产环境会进行压缩
  • 需要在项目根目录进行打包
• 在项目根目录创建 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 的匹配执行顺序是从右到左

使用配置文件：

可以简化在终端里重复输入的很长的打包命令

• 在项目根目录下创建 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

网址：https://parceljs.org/

基本介绍：

• web 应用打包工具
• 使用多核处理以及 cache 提升打包效率
• 开箱即可用的零配置
• 不需要插件对非 JS 文件进行转换和打包

基本使用：

• 安装包：parcel-bundler
• 创建 index.html 和 index.js 文件，以及其他文件，将依赖导入并写好代码
• 打包文件：parcel index.html (index.html 是入口 html 文件)

3. Rollup

网址：https://www.rollupjs.com/

基本介绍：

• 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