zoukankan      html  css  js  c++  java
  • [转] 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";

  • 相关阅读:
    解题:NOI 2007 社交网络
    解题:2018九省联考 一双木棋
    125. 背包问题 II
    152. 组合
    140. 快速幂
    148. 颜色分类
    144. 交错正负数
    83. 落单的数 II
    124. 最长连续序列
    59. 最接近的三数之和
  • 原文地址:https://www.cnblogs.com/chris-oil/p/10426246.html
Copyright © 2011-2022 走看看