读vue源码看前端百态2--打包工具

上图是vue的package.json文件。

除了vue, React, Ember, Preact, D3, Three.js, Moment, etc. 一些颇有名的js库,纷纷使用Rollup来做为打包工具，因此Rollup想必有它的优点。除了rollup，固然还有一些你们耳熟能详的打包自动化工具，好比webpack,gulp,grunt,lerna,这篇咱们就来看一下他们的区别，以避免书到用时方恨少！也是帮助咱们在构建工程的时候使用合适的工具，固然会让你事半功倍的～

Rollup

Rollup 是下一代 ES6 模块化工具，它最大的亮点是利用 ES6 模块设计，生成更简洁、更简单的代码。rollup更适合构建javascript库。

rollup优点

• 自动 Tree-shaking(Tree-shaking, 也被称为 "live code inclusion," 它是清除实际上并无在给定项目中使用的代码的过程，可是它能够更加高效。)
• 打包速度快
• 配置简单

rollup使用

npm install rollup
使用配置文件rollup.config.js

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
};
复制代码

执行rollup -c rollup.config.js

简介：

input：这个包的入口点 (例如：你的 main.js 或者 app.js 或者 index.js)
file： 要写入的文件。也可用于生成 sourcemaps，若是适用
format：关于format选项，rollup提供了五种选项:

* amd – 异步模块定义，用于像RequireJS这样的模块加载器
* cjs – CommonJS，适用于 Node 和 Browserify/Webpack
* es – 将软件包保存为ES模块文件
* iife – 一个自动执行的功能，适合做为<script>标签。（若是要为应用程序建立一个捆绑包，您可能想要使用它，由于它会使文件大小变小。）
* umd – 通用模块定义，以amd，cjs 和 iife 为一体
复制代码

了解更多模块相关内容，移步个人第一篇文章读vue源码看前端百态1--模块化

rollup基础插件

rollup-plugin-alias: 提供modules名称的 alias 和 reslove 功能
rollup-plugin-babel: 提供babel能力
rollup-plugin-eslint: 提供eslint能力
rollup-plugin-node-resolve: 解析 node_modules 中的模块
rollup-plugin-commonjs: 转换 CJS -> ESM, 一般配合上面一个插件使用
rollup-plugin-serve: 类比 webpack-dev-server, 提供静态服务器能力
rollup-plugin-filesize: 显示 bundle 文件大小
rollup-plugin-uglify: 压缩 bundle 文件
rollup-plugin-replace: 类比 Webpack 的 DefinePlugin , 可在源码中经过process.env.NODE_ENV 用于构建区分 Development 与 Production 环境.
复制代码

学习更多rollup工具：www.rollupjs.com/guide/zh

Webpack

Webpack 的定位是模块打包器，rollup 还不支持一些特定的高级功能，尤为是用在构建一些应用程序的时候，特别是代码拆分和运行时态的动态导入dynamic imports at runtime.若是你的项目中须要这些功能,则使用webpack更为适合。 segmentfault.com/img/bVVVqL?…

webpack是收把项目看成一个总体，经过一个给定的的主文件，webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件

webpack优点

• webpack 是以 commonJS 的形式来书写脚本滴，但对AMD/CMD 的支持也很全面，方便旧项目进行代码迁移
• 全部静态资源均可以被当成模块引用，而不只仅是JS了
• 开发便捷，能替代部分 grunt/gulp 的工做，好比打包、压缩混淆、图片转base64等
• 扩展性强，插件机制完善（异步加载、单独打包）

webpack使用

由于webpack功能很是强大，了解更多：webpack.docschina.org/concepts 若是想本身构建一个webpack项目，能够跟随 segmentfault.com/a/119000001… 学习！这里就不介绍了

webpack的配置文件

配置文件(webpack.config.js),每一个项目下都必须配置有一个 webpack.config.js

entry 页面入口文件配置,它将是整个依赖关系的根
output 对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里）

loaders  
一、实现对不一样格式的文件的处理，好比说将scss转换为css，或者typescript转化为js
二、转换这些文件，从而使其可以被添加到依赖图中
loader是webpack最重要的部分之一，经过使用不一样的Loader，咱们可以调用外部的脚本或者工具，实现对不一样格式文件的处理，loader须要在webpack.config.js里边单独用module进行配置

plugins 插件项,loaders负责的是处理源文件的如css、jsx，一次处理一个文件。而plugins并非直接操做单个文件，它直接对整个构建过程起做用

Alias 项目迁移更方便
externals 使用场景是外部依赖不须要打包进bundle
复制代码

lerna

一种管理多packages javascript项目的方式。

• 自动解决packages之间的依赖关系
• 经过git 检测文件改动，自动发布
• 根据git 提交记录，自动生成CHANGELOG

lerna使用

1. npm install lerna -g

2. 初始化一个lerna工程: mkdir lerna
cd lerna/
lerna init

会出现：
- packages(目录)
- lerna.json(配置文件)
- package.json(工程描述文件)

3. 添加测试package包
cd packages/
mkdir modulea
cd modulea/
npm init -y

文件目录：
--packages
	--modulea
		package.json
--lerna.json
--package.json

4. 为modulea中的package.json添加依赖:
{
  "name": "modulea",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.6"
  }
}

5. 返回主目录：
执行lerna bootstrap,会发现modulea中的vue依赖已经安装上了

6.与git仓库链接(以github为例)
github新建仓库（根据github的教程）
本地链接远程 （git remote add origin https://github.com/Wendydesigner/lerna.git）
提交代码 
git add .
git commit -m "first commit"
git rebase origin/master
git push origin master

7.在lerna.json中添加publish命令
{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "command": {
    "publish": {
      "message": "chore(release): publish %v"
    }
  }
}

8. 发布包
lerna publish  在提示中能够选择版本
能够发现lerna.json与modulea的package.json中的version保持一致；
而且工程中会记录每次发布的tag；

9.更新代码并提交远程，能够继续进行lerna publish


复制代码

这是最简单的lerna的工做流了。可是lerna还有更多的功能等待你去发掘。 lerna有两种工做模式,Independent mode和Fixed/Locked mode， lerna的默认模式是Fixed/Locked mode，在这种模式下，实际上lerna是把工程看成一个总体来对待。每次发布packges，都是全量发布，不管是否修改。可是在Independent mode下，lerna会配合Git，检查文件变更，只发布有改动的packge。

lerna最佳实践

为了可以使lerna发挥最大的做用，下面是一些特性。

• 采用Independent模式
• 根据Git提交信息，自动生成changelog
• eslint规则检查
• prettier自动格式化代码
• 提交代码，代码检查hook
• 遵循semver版本规范

在开发这种工程的过程的，最为重要的一点就是规范。

gulp

Gulp 是基于“流”的自动化构建工具，采用代码优于配置的策略，更易于学习和使用。Webpack 的定位是模块打包器，而 Gulp/Grunt 属于构建工具。Webpack 能够代替 Gulp/Grunt 的一些功能，但不是一个职能的工具，能够配合使用

grunt

Grunt 是一套前端自动化工具，帮助处理反复重复的任务。通常用于：编译，压缩，合并文件，简单语法检查等

由于webpack以及其插件实现了Gulp/Grunt的不少基本功能，因此大多数工程也就更倾向于使用webpack了，而Gulp/Grunt被打入了冷宫。

综上所述，每种说起的工具都有它的最佳实现，找到最合适的，即是最好的～