Initialize a project

mkdir babeljs
cd babeljs
npm init -y
Copy the code

The installation@babel/cliand@babel/core

Note the development dependency:

npm i -D @babel/cli @babel/core
Copy the code

If @babel/core is not manually specified, NPX will install babel6.x.

To create aes6file

cat <<EOF > 01.js const a = 0 const b = '1' export { a } export default b EOF
Copy the code

Run with NPX

% npx babel 01.js      
const a = 0;
const b = '1';
export { a };
export default b;
Copy the code

It’s sweet to add a semicolon to every line.

Using presets

Install a familiar NPM package: @babel/preset-env

npm i -D @babel/preset-env
Copy the code

Then specify load this preset in NPX:

% npx babel 01.js --presets=@babel/preset-env 
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.a = void 0;
var a = 0;
exports.a = a;
var b = '1';
var _default = b;
exports["default"] = _default;
Copy the code

It’s a very familiar smell.

Support JSX

Let’s change the 01.js code:

const a = 0
const b = '1'
const c = <h1>Hello</h1>
export { a, c }
export default b
Copy the code

Notice the addition of variable C, which returns a JSX node.

If we still use the previous compile command, we will get an error because the syntax parsing considers this to be the wrong js code:

% npx babel 01.js --presets=@babel/preset-env                                   
SyntaxError: /Users/kema/git/exp2fun/babeljs/01.js: Support for the experimental syntax 'jsx' isn't currently enabled (3:11):

  1 | const a = 0
  2 | const b = '1'
> 3 | const c = <h1>Hello</h1>
    |           ^
  4 | export { a, c }
  5 | export default b
  6 |

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

Follow the prompts to install @babel/preset-react and run:

 npx babel 01.js --presets=@babel/preset-env,@babel/preset-react
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.c = exports.a = void 0;
var a = 0;
exports.a = a;
var b = '1';
#So import React from at the top of the page'react'
var c = /*#__PURE__*/React.createElement("h1", null, "Hello");
exports.c = c;
var _default = b;
exports["default"] = _default;
Copy the code

As you can see, the variable c here is converted to the React component.

As the name suggests, @babel/preset-react is a react component. Is there @babel/preset-vue?

jsx -> vue

There is but not this name, but @vue/ babel-PRESET – JSX:

npm i -D @vue/babel-preset-jsx
Copy the code

Look forward to it:

% npx babel 01.js --presets=@babel/preset-env,@vue/babel-preset-jsx
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.c = exports.a = void 0;
var a = 0;
exports.a = a;
var b = '1';
var c = h("h1", ["Hello"]);
exports.c = c;
var _default = b;
exports["default"] = _default;
Copy the code

Perfect.

As can be seen from the above, JSX can be turned into a component for a different frame under different preset.

See the full JSX configuration under React:

import React from 'react'
const a = 0
const b = '1'
const c = <h1>Hello</h1>
export { a, c }
export default b
Copy the code
% npx babel 01.js --presets=@babel/preset-env,@babel/preset-react  
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.c = exports.a = void 0;

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var a = 0;
exports.a = a;
var b = '1';

var c = /*#__PURE__*/_react["default"].createElement("h1", null, "Hello");

exports.c = c;
var _default = b;
exports["default"] = _default;
Copy the code

plugins

The principles and usage of Babel plug-ins are well understood, and the official plug-ins are abundant. For everyday use, just stretch out your hand.

Here’s a quick example of the official plugin @babel/plugin-proposal-decorators:

// 02.js
@annotation
class MyClass {}

function annotation(target) {
  target.annotated = true;
}
Copy the code

When configuring plug-ins, plugin parameters are not easy to configure from the command line, so here we use.babelrc to configure the transformation plug-in and its parameters:

{
  "plugins": [["@babel/plugin-proposal-decorators",
      {
        "decoratorsBeforeExport": true}}]]Copy the code

compile

% npx babel 02.js
Copy the code

There’s a lot of code that comes out, and it’s basically polyfill.

It can also be used with the Presets parameter

npx babel 02.js --presets=@babel/preset-env
Copy the code

Convert to ES5 and node is ready to use.

more

For more configuration items, see the official documentation.