webpack_04 (babel)

Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；包括：语法转换、源代码转换等

babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用

?

1 2 3 4

#安装 npm install @babel/cli @babel/core -D #转换 npx babel src --out-dir dist

--out-dir：指定要输出的文件夹dist

--out-file：指定要输出的文件名

Babel 插件

?

1 2 3 4

#箭头函数转换相关的插件 npm install @babel/plugin-transform-arrow-functions -D #转换 npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

?

1 2 3

#const 转成 var npm install @babel/plugin-transform-block-scoping -D npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

?

1	#Babel的预设preset<br><br>#安装<br>npm install @babel/preset-env -D<br><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel">npx babel src --out-dir dist --presets=@babel/preset-env</em></em></em></em>

Babel的底层原理

 

 

 

webpack 与 babel  babel-loader

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#安装 npm install babel-loader @babel/core #配置 {         test: /\.m?js$/,         use: [           {             loader: 'babel-loader',             options: {               // plugins: ['@babel/plugin-transform-arrow-functions', '@babel/plugin-transform-block-scoping']               presets: ['@babel/preset-env']             }           }         ]       }

单独babel配置文件 babel.config.js

?

1 2 3

module.exports = {   presets: ['@babel/preset-env'] }