• [转] webpack中配置Babel


    一、安装

    npm install --save-dev babel-loader babel-core babel-preset-env

    二、在webpack.config.js中配置module

    1
    2
    3
    4
    5
    6
    7
    8
    9
    module: {
      rules: [
        {
          test: /.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader'
        }
      ]
    }

    三、新建.babelrc配置文件

      如下是vue-cli自动生成的babel配置。如果要配置plugins,需要npm install对应插件和依赖。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
      "presets": [
        ["env", {
          "modules"false,
          "targets": {
            "browsers": ["> 1%""last 2 versions""not ie <= 8"]
          }
        }],
        "stage-2"
      ],
      "plugins": ["transform-vue-jsx""transform-runtime"]
    }

    四、polyfill:完整模拟ES2015+ 

      Babel默认只转换新的JavaScript句法,而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。如果想让这些方法运行,就需要使用babel-polyfill,为当前环境提供一个垫片。

    npm install --save babel-polyfill

    1
    2
    3
    4
    5
    6
    7
    // 方法一:在webpack中引用
    module.exports = {
      entry: ["babel-polyfill""./app/js"]
    };
     
    // 方法二:在js入口顶部引入
    import "babel-polyfill";

  • 相关阅读:
    HackerRank savita-and-friends
    HackerRank training-the-army
    51Nod 1378 夹克老爷的愤怒
    51Nod 1380 夹克老爷的逢三抽一
    Codeforces 566 D. Restructuring Company
    BZOJ 2822: [AHOI2012]树屋阶梯
    Codeforces Gym 101138 G. LCM-er
    51Nod 1250 排列与交换
    BZOJ 1511: [POI2006]OKR-Periods of Words
    BZOJ 1355: [Baltic2009]Radio Transmission
  • 原文地址:https://www.cnblogs.com/chris-oil/p/10426246.html
Copyright © 2020-2023  润新知