脚本宝典收集整理的这篇文章主要介绍了es6基础0x024：babel简单使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

function includesPolyfill(){
    if(!Array.PRototype.includes){
        Array.prototype.includes=function(element){
              for(VAR i=0; i<this.length; i++){
                  if(this[i]===element)return true
              }
              return 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

• 安装babel：
  注意：（babel7以后babel相关的库基本都是放在@babel命名空间下）

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

  • @babel/core：核心库
  • @babel/cli：命令行工具
  • @babel/plugin-transform-arrow-functions：箭头函数语法转化插件
  @H_360_328@

  • 编写代码：

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

  • 使用babel解析

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

    上面命令的意思是将index.js使用babel转化，并将结果放到bundle.js中，执行之后，将会生成bundle

    • --plugins：为这次转化添加插件支持
    • -o：输出文件

  • 查看转化结果
    查看新生成的bundle.js，可以发现，箭头函数被转化成了普通的funciton， 在任何环境中都支持。

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

  • 说明
    所以，对于新特性，我们可以通过使用polyfill，也可以通过语法转化来达到兼容。

  0x004 babel配置文件

  很明显，使用babel cli的局限性很大，容易出错、不直观、繁琐等，所以babel还是支持配置文件的方式：

  • .babelrc方式

    • 在项目新建.babelrc文件，并使用JSON语法配置

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

    • 直接写在package.json的babel节点

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

  • babel.config.js方式

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

  两种方式大同小异，区别就是一个是动态的，一个是静态的，推荐小项目就用.babelrc，大项目就使用babel.config.js

  0x005 babel配置之plugin

  plugin是babel中很重要的概念，可以说，plugin才是构成babel扩展性的核心，各种各样的plugin构成了babel的生态，可以在这里看一些babel的插件列表。

  .babelrc配置文件中配置插件

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

  这时候我们再执行npx babel index.js -o bundle.js，就可以不指定plugin也能正常转化箭头函数了
  如果一个plugin可以配置参数，则可以这么配置：

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

  0x006 babel配置之preset

  在一个项目中，我们总是要配置一大堆的插件，这个时候，就是preset出马的时候了，那什么是preset呢？其实就是预置插件列表了，引入了一个preset就包含了一个系列的plugin
  比如preset-react就包含了以下插件：

  • @babel/plugin-syntax-jsx
  • @babel/plugin-transform-react-jsx
  • @babel/plugin-transform-react-display-name

  • .babelrc配置preset-react

    {
      "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
          }
        ]
      ]
    }

  0x007 babel和webpack

  • 添加webpack.config.js

    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' }
            ]
          }

  @H_714_777@- 添加相关依赖

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

  • 打包

    $ npm webpack 

  • 查看编译结果
    省略无关的东西，可以看到，箭头函数也被转化成了function

    
    /***/ "./index.js":
    /*!******************!*
      !*** ./index.js ***!
      ******************/
    /*! no static exports found */
    /***/ (function(module, exports) {
    
    eval("let add = function (num1, num2) {n  return num1 + num2;n};nnmodule.exports = add;nn//# sourceURL=webpack:///./index.js?");
    
    /***/ })
    
    /******/ });

  0x008 支持es6

  支持es6可以使用@babel/present-env来代替一系列的东西，还有许多的配置像，比如兼容的浏览器版本，具体可以看这里

  • 安装依赖包

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

  • 配置

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

  • 打包

    $ npm webpack 

  • 查看效果

    /***/ "./index.js":
    /*!******************!*
      !*** ./index.js ***!
      ******************/
    /*! no static exports found */
    /***/ (function(module, exports) {
    
    eval("let add = function (num1, num2) {n  return num1 + num2;n};nnmodule.exports = add;nn//# sourceURL=webpack:///./index.js?");
    
    /***/ })
    
    /******/ });

  0x009 总结

  这只是babel功能的一个小览，了解一下babel的基本使用和一些概念而已。

  脚本宝典总结

  以上是脚本宝典为你收集整理的es6基础0x024：babel简单使用全部内容，希望文章能够帮你解决es6基础0x024：babel简单使用所遇到的问题。

  如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

  本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
  如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。