Introduction to the usage of babel in es6 (code example)

function includesPolyfill(){
    if(!Array.prototype.includes){
        Array.prototype.includes=function(element){
              for(var i=0; i<this.length><p> Define a simple method here and add it to Array.prototype. For the sake of simplicity, not much exception detection is done. Then introduce the above method into the code and execute it first, and you can do it. In js environments that are not compatible with this method, the Array.protorype.includes method is always called directly: </p>
<p><img src="https://img.php.cn//upload/image/969/215/708/1543218509651832.png" title="1543218509651832.png" alt="Introduction to the usage of babel in es6 (code example)"><span class="img-wrap"></span></p>
<p><span class="img-wrap"></span>This is the polyfill , but polyfill has its limitations. For new features that can be implemented using old methods, polyfill can be used to solve them, such as Array.prototype.includes. However, for some new features and new syntax that cannot be implemented using old methods, such as arrows For functions, const, etc., polyfill is powerless. At this time, another method needs to be used: precompilation, or syntax conversion. </p>
<p><strong>Pre-compilation</strong></p>
<p>In the previous js development, there was no pre-compilation process. After finishing the js, it was deployed directly. However, with the development of front-end engineering As time went on, precompilation also appeared, especially after the emergence of languages ​​​​such as typescript, coding and publishing are no longer the same way. </p>
<p>Now before publishing, we always need to package, and packaging has many processes, such as resource integration, code optimization, compression and obfuscation... And in the operation of the code, we can use the new syntax Convert to the old syntax to support the new syntax. </p>
<p>To put it simply, new syntax->compiler->old syntax. </p>
<p>The function of the compiler is to convert the new features in the input source code into syntax. To put it bluntly, it is string processing, such as the processing of arrow functions: var add=(num1, num2)=>num1 num2 , this code cannot be executed in an environment that is not compatible with arrow functions, such as ie10</p>
<p><img src="https://img.php.cn//upload/image/632/246/621/1543218556955012.png" title="1543218556955012.png" alt="Introduction to the usage of babel in es6 (code example)"><span class="img-wrap"></span></p>
<p><span class="img-wrap"></span>But we can Through syntax conversion and compilation processing, the source code is converted into var add=function(num1, num2){return num1 num2}, so that it can be executed in browsers that do not support arrow functions</p>
<p><img src="https://img.php.cn//upload/image/426/987/944/1543218573788604.png" title="1543218573788604.png" alt="Introduction to the usage of babel in es6 (code example)"></p>
<p>Now let’s implement a simple compiler, which of course only supports arrow functions</p>
<pre class="brush:php;toolbar:false">function translate(src){
    let [_, name, args, body]=src.match(/\((.+)\)=>(.+)/)
    return `function ${name}(${args}){return ${body}}`
}

translate('var add=(num1, num2)=>num1+num')
//  var add=function(num1, num2){return num1+num2}

$ mk babel-demo 
$ cd babel-demo
$ npm init -y

$ npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-arrow-functions

var add=(num1, num2)=>num1+num2

$ npx babel --plugins @babel/plugin-transform-arrow-functions index.js -o bundle.js

var add = function (num1, num2) {
  return num1 + num2;
};

{
  "presets": [...],
  "plugins": [...]
}

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

module.exports = function () {
  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

{
    "plugins": ["@babel/plugin-transform-arrow-functions"]
}

{
  "plugins": [
    ["@babel/plugin-transform-arrow-functions", { "spec": true }]
  ]
}

{
  "presets": ["@babel/preset-react"]
}

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // default pragma is React.createElement
        "pragmaFrag": "DomFrag", // default is React.Fragment
        "throwIfNamespace": false // defaults to true
      }
    ]
  ]
}

const path=requrie('path')
module.exports={
    entry:path.resolve(__dirname, 'index.js'),
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
          { test: /\.js$/, use: 'babel-loader' }
        ]
      }

$ npm install --save-dev webpack webpack-cli babel-loader
"
- `webpack`：`webpack`核心库
- `webpack-cli`：`webpack`命令行工具
- `babel-loader`：`babel`的`webpack loader`

$ npm install --save-dev @babel/preset-env

{
    "plugins": ["@babel/present-env"]
}