What Babel that?

If the official document well written, I probably would not have to be their own notes.

Official Documents

Babel is a tool chain, is mainly used to convert ECMAScript 2015+ version of the code is backward-compatible JavaScript syntax to be able to run in the current and older versions of browsers or other environments. Listed below are the Babel thing you can do is:

1, the syntax conversion

2. Add the missing Polyfill target environment by way of the characteristics (by @ babel / polyfill module)

3, the source converter (codemods)

4, More! (See these videos inspired)

PS：https://www.babeljs.cn/docs/

Guide document first paper on the interpretation of babel, there are three questions:

1, the second sentence "by Polyfill way" this paragraph. In explaining a concept, introduced their own content details for extended interpretation would create another question, what is this thing? The answer to it is that this is what should not be included how to do this.

2, 4 to view more videos, more people speechless. I've never seen a framework, libraries or tools, the reader is required to watch the video summary of the functions of the stuff. Even features a simple tool can not explain, really do not understand what people write documentation think.

3, document organization lacks logic, is fragmented. For example guides just said Babel features, but the following written using some of the plug-in, this leads to Babel reverse function, that is scattered, not comprehensive.

What is Babel

Babel is to convert ES6 and above versions of the code ES5 tool.

It uses babel.config.js or .babelrc file as a configuration file, which is the most important configuration parameters presets and plugins.

plugins: Babel plugin can convert an input source, the output of the compiled code.

presets: a set of plug-Babel, the purpose is easy to use. Officials have built a number of preset, such as babel-preset-env.

PS: Check Babel other documents on the line.

Off now

To .babelrc profile, for example, to explain common usage.

Example 1:

{
   "presets": [["es2015", { "modules": false }]],
   "plugins": [
     [
       "component",
       {
         "libraryName": "element-ui",
         "styleLibraryName": "theme-chalk"
       }
     ]
   ]
}

PS: ES2015 SS6 =

The Babel configuration:

1, using the babel-preset-es2015 (abbreviated as ES2015) into the code ES6 ES5.

PS：https://www.npmjs.com/package/babel-preset-es2015

2, "modules: false", is not to convert the module into other module types ( "amd" | "umd" | "systemjs" | "commonjs" | "cjs").

3, "component", in fact, is babel-plugin-component plug-in, which is the reference to the component code conversion.

PS：https://www.npmjs.com/package/babel-plugin-component

Converts

import { Button } from 'components'

to

var button = require('components/lib/button’)
require('components/lib/button/style.css')

Example 2:

{
 "presets": [
   ["env", {
     "modules": false,
     "targets": {
       "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
     }
   }],
   "stage-2"
 ],
 "plugins": [],
 "env": {
   "test": {
     "presets": ["env", "stage-2"],
     "plugins": ["istanbul"]
   }
 }
}

The Babel configuration:

1, ES6 code uses babel-preset-env will turn ES5. presets in the "env" is the module name as the first parameter, the second parameter is passed in the parameter module.

Although babel-preset-es2015 similar babel-preset-env function, but it is recommended to use babel-preset-env, babel-preset-es2015 is not recommended.

PS: Detailed parameters explanation see https://www.npmjs.com/package/babel-preset-env , sharper than the official written documents.

2, presets and env are provided stage-2, the execution order is from bottom module, from high to low version version. This is well understood, such as code contains syntax ES6 and ES7, then you certainly have to convert ES7, then convert ES6, ES7 because the code may be converted into the code for ES6.

3, the root level of the "env", are under different NODE_ENV parameters, another set of valid configuration Babel. The inside of the "test" is configured, is arranged at Babel = test in NODE_ENV.

PS: babel-plugin-istanbul See https://www.npmjs.com/package/babel-plugin-istanbul

to sum up

Some plug-ins to see if the babel of specific use, it is recommended directly in npm point of view, Babel document looks really uncomfortable.