zoukankan      html  css  js  c++  java
  • webpack.config.js====配置babel,支持es6语法规则

    更多内容已经迁移至掘金,欢迎来指导学习:
     

    # 1. 安装依赖

    babel-loader: 负责 es6 语法转化
    babel-preset-env: 包含 es6、7 等版本的语法转化规则
    babel-polyfill: es6 内置方法和函数转化垫片
    babel-plugin-transform-runtime: 避免 polyfill 污染全局变量
    cnpm install --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-preset-env
    cnpm install --save-dev babel-polyfill babel-runtime

    # 2. 创建一个单独的babel配置文件 .babelrc,配置如下

    {
    "presets": [
    [
    "env",
    {
    "targets": {
    "browsers": ["last 2 versions"]
    }
    }
    ]
    ],
    "plugins": ["transform-runtime"]
    }

    # 3. 在webpack.config.js中的配置

    module.exports = {
        module: {
            rules: [
                //配置babel,自动编译es6语法
                {
                    test: /.js$/,
                    exclude: /(node_modules)/,
                    loader: 'babel-loader'
                }
            ]
        },
    }

    # 注意:babel-loader:8.X版本报错的问题(建议直接使用7.1.5版本)

    cnpm install --save-dev babel-loader@7.1.5

    # 4. 测试

    在js文件中,写es6语法,然后编译文件,如果顺利通过,那么配置成功

    # 5. 关于babel-polyfill

    它需要在我们项目的入口文件中被引入,或者在webpack.config.js中配置:
    require("babel-polyfill")
    
    import "babel-polyfill"
     一般在webpack项目中一般使用下面的方式
      module.exports = {
        entry: ["babel-polyfill", "./src/js"]
      };

    # 6.在 index.js中使用:

    import "babel-polyfill";
    let arr = [1, 2, 4];
    let arrB = arr.map(item => item * 2);
    console.log("可以使用ES6语法:"+arrB.includes(8));
     
  • 相关阅读:
    HDU 1716 排列2
    HDU 3405 World Islands
    HDU 5624 KK's Reconstruction
    HDU 2689 Tree
    UVA 12075 Counting Triangles
    UVA 11100 The Trip, 2007
    [USACO 2004DEC] Navigation Nightmare
    [USACO 2017DEC] Barn Painting
    [Usaco2017 Dec] A Pie for a Pie
    [USACO 2017DEC] Greedy Gift Takers
  • 原文地址:https://www.cnblogs.com/songxia/p/10314420.html
Copyright © 2011-2022 走看看