zoukankan      html  css  js  c++  java
  • webpack--关于babel的配置

    在webpack中只能处理一部分es6的新语法,一些更高级的es6或es7语法,webpack处理不了,这时需要借助第三方loader来处理这些高级语法

    当第三方loader把高级语法转化成低级语法后,会把结果交给webpack去打包到bundle.js中

    具体步骤如下:

    1.在webpack中,可以运行如下三套命令,去安装三套包,去安装babel相关的loader功能

    cnpm i babel-loader @babel/core @babel/preset-env -D
    cnpm i @babel/runtime @babel/plugin-transform-runtime -D
    cnpm i @babel/plugin-proposal-class-properties -D

    2.打开webpack.config.js配置文件,在module节点下的rules数组中,添加一个新的匹配规则

    module:{//配置所有第三方loader的模块
            rules:[//第三方模块的匹配规则
                {
                    test:/.js$/,
                    use:'babel-loader',//配置babel来转换高级的语法
                    exclude:/node_modules/
                }
            ]
        },

    3.在项目的根目录中,新建一个.babelrc的babel配置文件

    {
        "presets": ["@babel/preset-env"],
        "plugins": ["@babel/plugin-proposal-class-properties","@babel/plugin-transform-runtime"]
    }
  • 相关阅读:
    java常见面试题汇总(一)
    我的自学之路:java学习路线图分享
    bzoj3714 [PA2014]Kuglarz
    cf478D Red-Green Towers
    cf478C Table Decorations
    cf478B Random Teams
    cf479A Expression
    cf479C Exams
    cf479D Long Jumps
    cf479E Riding in a Lift
  • 原文地址:https://www.cnblogs.com/Super-scarlett/p/12325307.html
Copyright © 2011-2022 走看看