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"]
    }
  • 相关阅读:
    mysql数据库——特殊sql语句整理之修改表结构
    mysql数据库引擎——MyISAM,InnoDB
    Golang程序性能分析
    Docker基本操作
    go module
    Docker基础原理
    基于zookeeper或redis实现分布式锁
    漫谈微服务
    快速排序
    设计模式泛谈
  • 原文地址:https://www.cnblogs.com/Super-scarlett/p/12325307.html
Copyright © 2011-2022 走看看