webpack_04 (babel)

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

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

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

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

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

Babel 插件

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

#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

#Babel的预设preset

#安装
npm install @babel/preset-env -D
npx babel src --out-dir dist --presets=@babel/preset-env

Babel的底层原理

 

 

 

webpack 与 babel  babel-loader

#安装
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

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