读vue源码看前端百态2--打包工具
栏目: JavaScript · 发布时间: 5年前
内容简介:上图是除了
上图是 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
是以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 1、实现对不同格式的文件的处理,比如说将scss转换为css,或者typescript转化为js 2、转换这些文件,从而使其能够被添加到依赖图中 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被打入了冷宫。
综上所述,每种提及的 工具 都有它的最佳实现,找到最合适的,便是最好的~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 读vue源码看前端百态1--模块化
- 前端科普系列(三):CommonJS 不是前端却革命了前端
- 前端科普系列(三):CommonJS 不是前端却革命了前端
- 前端技术演进(三):前端安全
- 【前端优化】前端常见性能优化
- 【前端学习笔记】前端安全详解
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。