Babel:
1.单独babel转化
推荐网址:https://github.com/jamiebuilds/the-super-tiny-compiler
将ES6以上的代码转成向后兼容版本的javascript;包括语法转化、源代码转换
babel编译器工作流程为解析、转换、生成。
具体:原生源代码--》词法分析--》tokens数组--》语法分析--》AST抽象语法树--》遍历--》访问--》应用插件--》新的AST--》目标源代码
npm install @babel/core @babel/cli -D
在项目下创建一个demo.js文件,写js的一些代码
//将项目下的demo.js文件转成到dist文件下demo.js
//dir表示目录
npx babel demo.js --out-dir dist
//将项目下的demo.js文件转成到该项目下的test.js
//file表示目录
npx babel demo.js --out-file test.js
//需要具体转换哪些东西还得额外下载插件
箭头函数:
npm install @babel/plugin-transform-arrow-functions -D
//将项目下的demo.js文件转成到该项目下的test.js
//file表示目录
npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions
块级作用域:
npm install @babel/plugin-transform-block-scoping -D
//将项目下的demo.js文件转成到该项目下的test.js
//file表示目录
npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
//预设:(将经常用到的一些插件整合,不需要一个个的下载)
npm install @babel/preset-env -D
//将项目下的demo.js文件转成到该项目下的test.js
//file表示目录
npx babel demo.js --out-file test.js --presets=@babel/preset-env
2.webpack中babel转化
npm install babel-loader @babel/core @babel/cli @babel/plugin-transform-arrow-functions npm install @babel/plugin-transform-block-scoping @babel/preset-env -D
下载后在webpack.config.js的module.exports中module的rules中:
(1)不成功,没有转化,因为没有用到插件
module:{
rules:[{
test:/\.js$/,
loader:"babel-loader"
} ]
}
终端:npm run build
(2)用哪个插件就都按上
module:{
rules:[{
test:/\.js$/,
use:{
loader:"babel-loader",
options:{
plugin:[
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-block-scoping",
]
}
}
} ]
}
终端:npm run build
(3)预设插件
module:{
rules:[{
test:/\.js$/,
use:{
loader:"babel-loader",
options:{
presets:[
"@babel/preset-env",
]
}
}
} ]
}
终端:npm run build
3.babel配置文件
rc---运行时编译
在项目下创建一个babel.config.js文件
内容为:
module.exports = {
presets:[
"@babel/preset-env"
]
}
在webpack.config.js的module.exports中module的rules中:
module:{
rules:[{
test:/\.js$/,
loader:"babel-loader"
} ]
}