工程化
什么是前端工程化,个人对前端工程化的理解
引用一篇知乎上的回答 什么是前端工程化?,看看这张图里的内容,巨多…不会的东西太多了
这一篇我只能整理下构建工具的知识点
前端工程化发展很快,随着模块化的发展,前端代码需要有构建工具,打包工具,来组织糅合代码,于是出现了grunt、gulp、webpack,grunt没有接触过,一开始接触的是webpack,后来接手了一个较老的项目用的是gulp
包括近些年流行的rollup parcel,还有尤大的vite,前端构建工具越来越多,但是有多少人喜欢配置webpack呢
es6的出现,浏览器的发展速度跟不上js的更新速度,es6代码必须转换成浏览器可识别的es5,所以Babel应运而生
WebPack
先来一篇砸场子的,哈哈webpack 为什么这么难用?
webpack4学习笔记
之前学习webpaakc的时候,写过一篇笔记 webpack4学习笔记
webpack的几个核心要点
entry output loader plugin
-
entry 入口文件
-
output 输出文件
-
loader,转译,在modules中配置一些转译规则
-
plugin,插件,常用的插件有
– CleanWebpackPlugin 一定要放在最上面,作用是先删除dist目录再创建新的dist目录。里面的参数为要删除的目录,放在一个数组里面
– HtmlWebpackPlugin,必备配置,懂得都懂
– HotModuleReplacementPlugin,热更新插件
– MiniCssExtractPlugin,提取css成独立文件插件 -
还有一个服务器配置 devServer
//服务器配置
devServer:{
// contentBase: path.resolve(__dirname,'dist'), //设置项目的基本目录结构
host: 'localhost', //服务器IP配置
port: '1990', //端口配置
open:true, //自动打开刷新页面
hot:true, //开启热更新
// compress: true //服务器压缩是否开启
}
webpack面试题
常见面试题参考 webpack系列–浅析webpack的原理
webpack打包优化参考 webpack 项目打包优化
Gulp
gulp的话,主要是靠task驱动,gulp所要做的操作都写在gulp.task()中,系统有一个默认的default任务
创建Gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
cssmin = require('gulp-minify-css'),
clean = require('gulp-clean');
//gulp.task...
具体配置参考 写一份gulp常用配置文件,构建前端工作流
gulp和webpack区别
- gulp:是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作
(1)构建工具
(2)自动化
(3)用于:提高效率——能够优化前端工作流程,提高工作效率
(4)自动刷新页面,雪碧图,压缩css、js,编译less,检查语法等
(5)使用gulp可以配置你需要的插件,把以前需要手工做的事情让它帮你做了 - webpack:是文件打包工具,可以把项目的各种js文件、css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案
(1)打包工具
(2)模块化识别
(3)用于:编译模块代码方案 - 两者不是一个工具,不具有可比性,更不冲突
rollup和parcel
webpack 为处理资源管理和分割代码而生,可以包含任何类型的文件,灵活,插件多
rollup 用标准化的格式(es6)来写代码,通过减少死代码(tree-shaking)尽可能地缩小包体积
parcel 超快的打包速度,多线程在多核上并发编译,不用任何配置
三者对比
-
webpack和rollup都需要配config文件,指明entry, output, plugin,transformations
二者的细微区别在于:
rollup 有对import/export所做的node polyfills,webpack没有
rollup支持相对路径,而webpack没有,所以得使用path.resolve/path.join
两者实现tree-shaking的方式也不一样,这是个面试点,会问到,实现方式,哪个体积更小更彻底,为什么 -
parcel则是完全开箱可用的,不用配置
对于应用使用 webpack,对于类库使用 Rollup
如果你需要代码拆分(Code Splitting),或者你有很多静态资源需要处理,再或者你构建的项目需要引入很多CommonJS模块的依赖,那么 webpack 是个很不错的选择。
如果您的代码库是基于 ES2015 模块的,而且希望你写的代码能够被其他人直接使用,你需要的打包工具可能是 Rollup 。
参考
打包工具比较:webpack VS rollup VS parcel
Webpack vs Rollup
Rollup 与 webpack的区别
Rollup使用
webpack、rollup、parcel优劣?
tree shaking
摇树 直接上链接
浅谈性能优化之Tree Shaking
tree-shaking简单分析
Tree-Shaking性能优化实践 - 原理篇
Babel
babel 到底做了什么?怎么做的?
简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行。
babel6到babel7进行了一个大的更新,这一点在学习webpack4的时候采坑了
- babel 7 的一个重大变化,把所有 babel-* 重命名为 @babel/*,例如:
– babel-cli 变成了 @babel/cli。
– babel-preset-env 变成了 @babel/preset-env。进一步,还可以省略 preset 而简写为 @babel/env。
– babel-plugin-transform-arrow-functions 变成了 @babel/plugin-transform-arrow-functions。和 preset 一样,plugin 也可以省略,于是简写为 @babel/transform-arrow-functions。
所以不再讨论babel6
babel在webpack中的配置,截取一段,之一babel和babel-loader的版本对应关系
{
test:/\.js$/,
use:[
{
//webpack 4.x | babel-loader 8.x | babel 7.x
//webpack 4.x | babel-loader 7.x | babel 6.x
loader:'babel-loader',
options:{ //env针对的是ES的版本,它会自动选择。react针对的就是react
presets: ['@babel/preset-env']
}
}
],
exclude: /node_modules/, //不去检查node_modules里的内容,那里的js太多了,会非常慢
include:path.resolve(__dirname,'src'), //直接规定查找的范围
}
学习和配置 参考文章
一口(很长的)气了解 babel
babel7入门 —— 超详细学习笔记
未完待续,持续更新…