编译ES6(ReactJS)代码以使用IE> = 9

时间:2018-02-07 13:20:59

标签: laravel reactjs babel laravel-mix

所以我一直在React JS中构建一个应用程序,并且已经利用了ES6提供的一些语法,例如:

  • 使用let和const
  • 类组件
  • arrow functions(componentWillMount =()=> {})
  • 无构造函数的状态声明(state = {someProperty:true})

我在编译时遇到了一些问题。据我所知,我的代码似乎适用于大多数的chromes,但整个事情都在IE9或IE10中崩溃。设置.babelrc文件的正确方法是什么? (以下是我现在所拥有的)

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

对于任何知道如何为Laravel-mix设置这个组件的人来说,也可以获得奖励积分作为我在laravel 5.5环境中建立的组件。 (这是我的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')
    .js('resources/assets/js/universal-nav.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();

1 个答案:

答案 0 :(得分:0)

尝试https://babeljs.io/repl/将您的代码转换为可以使用您想要的任何浏览器,它有很多转换选项,请尝试一下,如果您有任何问题,请在此处提供帮助