• [转] 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";

  • 相关阅读:
    ASP.NET MVC EF4.1
    RabbitMQ Boot Step
    图书商城项目总论
    CodeSharp.EventSourcing框架介绍如何实现异步事件订阅
    asp.net的cms 原理篇
    异步编程:线程概述及使用
    2012
    CodeSharp.EventSourcing框架介绍
    最近开发的一个文档管理系统
    团队项目开发
  • 原文地址:https://www.cnblogs.com/chris-oil/p/10426246.html
Copyright © 2020-2023  润新知