zoukankan      html  css  js  c++  java
  • webpack中配置Babel

      Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行。

    一、安装

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

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

    module: {
      rules: [
        {
          test: /.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader'
        }
      ]
    }

    三、新建.babelrc配置文件

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

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

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

     

  • 相关阅读:
    (6)sql/puls
    (5)Toad for oracle使用
    (4)oracle连接工具和配置监听
    (3)oracle建用户、建表、权限、命名空间
    (2)oracle服务、建库
    (1)oracle安装、卸载、启动、关闭、登陆以及同时遇到的问题
    (1)C#工具箱-公共控件1
    Tarjan
    最小表示法
    STL
  • 原文地址:https://www.cnblogs.com/yangshifu/p/9584415.html
Copyright © 2011-2022 走看看