使用 laravel-mix 编译 ES6 React 代码

Question

我正在尝试使用 laravel-mix 编译使用 ES6 的 React 代码，但我在编译诸如箭头函数之类的东西时遇到了问题，根据我的理解，这些东西在 ES6 中很流行。所以我有一个 webpack.mix.js 文件：

mix.react('resources/assets/js/app.js', 'public/js/app.js')
    .js('resources/assets/js/cross-brand-nav.js', 'public/js/app.js')
    .js('resources/assets/js/FullWidthTabs.js', 'public/js/app.js')
    .version()
    .combine([
        'resources/assets/bower_assets/jquery/dist/jquery.min.js',
        'resources/assets/bower_assets/moment/min/moment.min.js',
        'resources/assets/bower_assets/bootstrap/dist/js/bootstrap.js',
        'resources/assets/bower_assets/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
        'resources/assets/js/admin.js'
    ], 'public/js/admin.js').version()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/bower_assets/components-font-awesome/scss/font-awesome.scss', 'public/css').version()
    .styles([
        'resources/assets/css/FullWidthTabs.css'
    ], 'public/css/pf.css')
    .styles([
        'resources/assets/bower_assets/bootstrap/dist/css/bootstrap.min.css',
        'resources/assets/bower_assets/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css'
        ], 'public/css/admin.css').version();

当我尝试编译如下代码时：

testFunction = () => {

    }

我收到这样的错误：

编译错误模块构建失败：SyntaxError: Unexpected token (51:17)

这是指向那个函数。我需要在 ES6 中正确编译的任何额外步骤？

Answer 1

尚不包括属于类成员的箭头函数。你需要安装babel-transform-class-properties。

运行这个命令：

npm install --save-dev babel-plugin-transform-class-properties

如果不存在，则在项目的根目录中创建一个.babelrc 文件并添加此文件

{
  "plugins": ["transform-class-properties"]
}

或者如果您需要添加一些选项

{
  "plugins": [
    ["transform-class-properties", { "spec": true }]
  ]
}

Answer 2

好的，我似乎在这里解决了我自己的问题。首先我需要将我的 .babelrc 文件编辑为

{
  "presets": [
    ["es2016"],
    "react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

显然安装了 babel-plugin-transform-class-properties 插件和 babel-preset-es2016，然后事情似乎可以像我预期的那样编译和工作。