• 17 webpack中babel的配置


    在webpack中,默认只能处理一部分ES6的新语法,一些更高级的ES6语法或者ES7语法,
    webpack是处理不了的;这时候,就需要借助于第三方的loader,来帮助webpack处理这些高级的语法,
    当第三方loader把高级语法转为低级的语法之后,会把结果交给webpack去打包到bundle.js中。

    通过Babel,可以帮我们将高级的语法转换为低级的语法
    1.webpack中,可以运行如下两套 命令,安装两套包,去安装Babel相关的loader功能:
    1.1第一套:cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
    1.2第二套:cnpm i babel-preset-env babel-preset-stage-0 -D
    2.打开webpack的配置文件,在module节点下的rules数组中,添加一个 新的匹配规则:
    2.1{test:/.js$/,use:'babel-loader',exclude:/node_modules/}
    2.2注意:在配置babel的loader规则的时候,必须把node_modules目录,通过exclude选项排除掉:
    原因有两个:
    2.2.1如果不排除node_modules,则Babel会把node_modules中所有的第三方JS文件,
    都打包编译,这样,会非常消耗CPU,同时,打包速度非常慢;
    2.2.2哪怕,最终,Babel把所有node_modules中的JS转换完毕了,但是,项目也无法正常运行!
    3.在项目的根目录中,新建一个叫做 .babelrc 的Babel配置文件,这个配置文件,属于JSON格式,
    所以,在写 .babelrc配置的时候,必须符合JSON语法规范:不能写注释,字符串必须使用双引号
    3.1在.babelrc写如下配置:大家可以把preset翻译成【语法】的意思

            // {
            //     "presets":["env","stage-0"],
            //     "plugins":["transform-runtime"]
            // }
    

    4.了解:目前,我们安装的 babel-preset-env,是比较新的ES语法,之前,我们安装的是
    babel-preset-es2015,现在,出现了一个更新的 语法插件,叫做babel-preset-env,
    它包含了 所有的和es***相关的语法

  • 相关阅读:
    Flex的DateChooser组件中文显示方法
    FLEX XML XMLList XMLListCollection ArrayCollection相互转换
    开机电脑cpu占用100%
    FLEX 动态绑定chart 数据
    FLEX 数组 转化成 xml
    FLEX 通过url 得到网页内容 xml通信
    FLEX 时间计算
    FlEX 如何调试
    unix,linux,windows 哪个更好,更适合做服务器
    FLEX httpService 用法介绍
  • 原文地址:https://www.cnblogs.com/songsongblue/p/11889959.html
Copyright © 2020-2023  润新知