stage-0

作者: 秉持本心 | 来源:发表于2019-05-28 16:41 被阅读0次

    今天在项目中用到了箭头函数

    image.png
    然后刷新项目时报错,报错原因是Unexpected token
    image.png

    在项目开发过程中使用es6等高级语法,需要用到babel,在webpack配置的module中配置babel-loader。由于babel-preset配置选项较多,我们一般可以在根目录下建立.babelrc文件,专门用来放置babel preset配置。


    image.png
    image.png
    image.png

    .babelrc中的配置

    • react版块用于编译jsx文件
    • es2015用于预先加载es6语法的模块
    • env告诉babel只编译批准的内容。

    项目中js文件的箭头函数是没有问题的,只在jsx文件中使用箭头函数会编译报错。

    解决方案
    # ES2015转码规则
    $ npm install --save-dev babel-preset-es2015
    
    # react转码规则
    $ npm install --save-dev babel-preset-react
    
    # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3
    

    .babelrc里更改配置


    image.png

    相关文章

      网友评论

          本文标题:stage-0

          本文链接:https://www.haomeiwen.com/subject/rusdtctx.html