【笔记】Babel学习笔记

发表于 更新于 阅读次数：

前言

Babel is a JavaScript compiler.（官网）

HTML环境通过Babel转换JS代码

引入依赖

1
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

定义需要被Babel转换的JS代码

1
2
3
<script type="text/babel">
  ...
</script>

Nodejs环境通过Babel转换JS代码

下载依赖

1
npm install -D @babel/core @babel/cli

转换JS文件

--out-file dist/index.js：用于指定单个文件的输出路径，默认会覆盖原文件
--out-dir dist：用于指定整个目录的输出路径，适用于批量转换多个文件

1
babel src/index.js
1
babel src

预设环境

预设开发环境

  • 将ES6语法转换为ES5语法
下载依赖
1
npm install -D @babel/core @babel/cli @babel/preset-env
修改配置文件
babel.config.js
1
2
3
4
5
6
module.exports = {
  presets: [
    "@babel/preset-env"
  ],
  plugins: []
};
转换JS文件
1
babel src/index.js --out-file dist/index.js

预设React环境

下载依赖
1
npm install -D @babel/core @babel/cli @babel/preset-react
修改配置文件
babel.config.js
1
2
3
4
5
6
7
module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  plugins: []
};
转换JSX文件
1
babel src/index.jsx --out-file dist/index.js

预设TypeScript环境

下载依赖
1
npm install -D @babel/core @babel/cli @babel/preset-typescript
修改配置文件
babel.config.js
1
2
3
4
5
6
7
module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  plugins: []
};
转换TS文件
1
babel src/index.ts --out-file dist/index.js

插件

  • 使用多个插件时使用,分隔

箭头函数转换为普通函数

下载依赖
1
npm install -D @babel/core @babel/cli @babel/plugin-transform-arrow-functions
直接转换JS文件
1
babel src/index.js --out-file dist/index.js --plugins @babel/plugin-transform-arrow-functions
通过配置文件转换JS文件
修改配置文件
babel.config.js
1
2
3
4
5
6
module.exports = {
  presets: [],
  plugins: [
    "@babel/plugin-transform-arrow-functions"
  ]
};
转换JS文件
1
babel src/index.js --out-file dist/index.js

let和const转换为var

下载依赖
1
npm install -D @babel/core @babel/cli @babel/plugin-transform-block-scoping
直接转换JS文件
1
babel src/index.js --out-file dist/index.js --plugins @babel/plugin-transform-block-scoping
通过配置文件转换JS文件
修改配置文件
babel.config.js
1
2
3
4
5
6
module.exports = {
  presets: [],
  plugins: [
    "@babel/plugin-transform-block-scoping"
  ]
};
转换JS文件
1
babel src/index.js --out-file dist/index.js

async…await语法转换

下载依赖
1
npm install -D @babel/core @babel/cli @babel/plugin-transform-runtime
通过配置文件转换JS文件
修改配置文件
babel.config.js
1
2
3
4
5
6
module.exports = {
  presets: [],
  plugins: [
    "@babel/plugin-transform-runtime"
  ]
};
转换JS文件
1
babel src/index.js --out-file dist/index.js --plugins @babel/plugin-transform-runtime

Nodejs环境通过Webpack+Babel转换JS代码

  • 在Webpack中配置Babel，先让Babel转换JS代码（新语法转换为旧语法），再让Webpack转换JS代码（转换为模块化语法）

预设环境

1
2
npm install -D webpack webpack-cli
npm install -D @babel/core @babel-loader @babel/preset-env
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env"
            ]
          }
        }
      }
    ]
  }
};
1
npx webpack

插件

1
2
npm install -D webpack webpack-cli
npm install -D @babel/core @babel-loader @babel/plugin-transform-arrow-functions
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: [
              "@babel/plugin-transform-arrow-functions"
            ]
          }
        }
      }
    ]
  }
};
1
npx webpack

Nodejs环境通过Webpack+Babel+Polyfill转换JS代码

  • 在Webpack中配置Babel，先让Babel转换JS代码（新语法转换为旧语法、Polyfill注入旧版JS环境中不存在的新函数），再让Webpack转换JS代码（转换为模块化语法）

预设环境

1
2
3
npm install -D webpack webpack-cli
npm install -D @babel/core @babel-loader @babel/preset-env
npm install core-js@3
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

corejs：指定corejs的版本
useBuiltIns：配置是否自动注入Polyfill

false：缺省值，不注入Polyfill
usage：自动注入
entry：手动注入

babel.config.js
1
2
3
4
5
6
7
8
9
module.exports = {
  presets: [
    ["@babel/preset-env", {
      corejs: 3,
      useBuiltIns: "usage"
    }]
  ],
  plugins: []
};
1
npx webpack

手动注入

babel.config.js
1
2
3
4
5
6
7
8
9
module.exports = {
  presets: [
    ["@babel/preset-env", {
      corejs: 3,
      useBuiltIns: "entry"
    }]
  ],
  plugins: []
};
1
2
import "core-js/stable";
import "regenerator-runtime/runtime";

完成