Babel 7

1. babel配置

Babel 是一个工具链，主要用于将 ECMAScript 2015+ （又可称为ES6，ES7，ES8等）版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中（如低版本的 node 环境中）。

1.1 @babel/cli @babel/core

create-react-app myapp 新建项目

[Install]
yarn add @babel/cli @babel/core --dev

@babel/cli 是babel提供的命令行工具，主要是提供babel这个命令。 官网推荐安装在项目中，而不是安装在全局环境，因为每个项目用的babel的版本不一样。可以单独管理和升级。

Babel 的核心功能包含在 @babel/core 模块中。不安装 @babel/core，无法使用 babel 进行编译。

修改 package.json, 在 script 里面新增

"babel": "babel app.js -o ./dist/app.js"

App.js

import React from 'react';

let func = () => {
  return 1;
};

function App() {
  return <div>
      1
      {func()}
    </div>;
}
export default App;

执行 yarn babel，报错：

{ SyntaxError: E:\hjf\test\babel-app\src\App.js: Support for the experimental syntax 'jsx' isn't currently enabled 

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to en                                                able transformation.

1.2 @babel/plugin-syntax-jsx @babel/preset-react

[Install]

yarn add @babel/plugin-syntax-jsx --dev

新建 babel.config.js

module.exports = {
    plugins: [
        "@babel/plugin-syntax-jsx"
    ]
}

执行 yarn babel，生成/dist/app.js文件

import React from 'react';
let func = () => {
  return 1;
};
function App() {
  return <div>
      1
      {func()}
    </div>;
}
export default App;

没有任何变化…

[Install]

yarn add @babel/preset-react --dev

babel.config.js

module.exports = {
+   presets: [
+       "@babel/preset-react"
+   ],
    plugins: [
        "@babel/plugin-syntax-jsx"
    ]
}

执行 yarn babel，生成/dist/app.js文件

import React from 'react';

let func = () => {
  return 1;
};

function App() {
  return /*#__PURE__*/React.createElement("div", null, "1", func());
}

export default App;

转换 JSX 语法

1.3 @babel/plugin-transform-arrow-functions

[Install]
yarn add @babel/plugin-transform-arrow-functions --dev

执行 yarn babel，生成/dist/app.js文件

import React from 'react';

let func = function () {
  return 1;
};

function App() {
  return /*#__PURE__*/React.createElement("div", null, "1", func());
}
export default App;

转化箭头函数，这里let没有转化

1.4 preset(预设的插件集合)

官网
预设的插件包，不需要一个一个引入

【官方 Preset】：针对常用环境编写了一些 preset：

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

1. Babel 可以删除类型注释！Babel 不做类型检查，但仍然需要安装 Flow 或 TypeScript 来执行类型检查的工作。
2. @babel/preset-env 官方描述：

   @babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

@babel/preset env是一个智能预置，它允许您使用最新的JavaScript，而无需对目标环境所需的语法转换（以及可选的浏览器polyfill）进行微观管理。这不仅让您的生活更轻松，而且JavaScript捆绑包更小！

同时使用多个Plugin和Preset时的执行顺序：

1. 先执行完所有Plugin，再执行Preset。
2. 多个Plugin，按照声明次序顺序执行。
3. 多个Preset，按照声明次序逆序执行。

1.4.1 @babel/preset-env

[Install]
yarn add @babel/preset-env --dev

babel.config.js

module.exports = {
    presets: [
        "@babel/preset-react",
+       "@babel/preset-env"
    ],
    plugins: [
        "@babel/plugin-syntax-jsx"
    ]
}

执行 yarn babel，生成/dist/app.js文件，转化成功

"use strict";

var func = function func() {
  return 1;
};

1.4.2 @babel/preset-flow @babel/preset-typescript

[Install]
yarn add @babel/preset-flow @babel/preset-typescript --dev

babel.config.js

module.exports = {
    presets: [
        "@babel/preset-react",
        "@babel/preset-env",
+       "@babel/preset-flow",
+       "@babel/preset-typescript"
    ],
    plugins: [
        "@babel/plugin-syntax-jsx"
    ]
}

安装官网推荐的预设插件包

1.5 @babel/polyfill

App.js 新增代码

let arr = [1, 2, 4]
arr.includes(3);

执行 yarn babel，生成/dist/app.js文件，includes 并没有转化

"use strict";

var arr = [1, 2, 4];
arr.includes(3);

[Install]
yarn add @babel/polyfill

接下去阅读相关文章

2. 错误

2.1 [报错]

var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(k) {
                                             ^
ReferenceError: regeneratorRuntime is not defined

[解决]
在 babel.config.js中加入plugin

plugins:[
    "@babel/plugin-transform-runtime"
]

3. 相关文章

1. https://www.babeljs.cn/docs/
2. https://juejin.im/post/6844904008679686152
3. https://juejin.im/post/6844904132294213639#heading-0
4. https://www.jianshu.com/p/cbd48919a0cc