Laravel Mix not transpiling vendor.js to es5

问题

Laravel Mix does not seem to transpile vendor.js and manifest.js to ES5. It fails on iPhone Safari and IE 11.

IE DevTools shows these errors:

And it appears that it still has ES6 features:

The other files seem to transpile such as app.js and the chunks.

Here's my webpack.mix.js

let mix = require('laravel-mix');

let options = {
  processCssUrls: false,
}

let config = {
  output: {
    chunkFilename: 'assets/js/chunks/[name].js',
    publicPath: '/'
  }
}

if (mix.inProduction()) {
  config.output.chunkFilename = 'assets/js/chunks/[name].[chunkhash].js'
}

mix
  .js('resources/assets/js/app.js', 'public/assets/js')

  .sass('resources/assets/sass/web.scss', 'public/assets/css')
  .sass('resources/assets/sass/fonts.scss', 'public/assets/css')

  .copy('resources/assets/img', 'public/assets/img')
  .copy('node_modules/@fortawesome/fontawesome-free/webfonts','public/assets/webfonts')

  .extract([
      // Libraries...
  ])

  .disableNotifications()
  .webpackConfig(config)
  .options(options)
  .sourceMaps()

if (mix.inProduction()) {
  mix.version()
}

And my .babelrc

{
  "plugins": ["syntax-dynamic-import"]
}

I tried the following:

Install babel-preset-es2015 and add es2015 to my .babelrc presets.
Add .babel('[...]/vendor.js', '[...]/vendor.es5.js') to my webpack.mix.js

How can I get the vendor.js and manifest.js file to transpile to ES5? Or at least get it working with IE 11 and iPhone Safari.

回答1:

After some research it became clear that Laravel Mix 4.x does not transpile included packages. To achieve this, add the following to your webpack.mix.js file, prior to your mix commands:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(bower_components)/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: Config.babel()
                    }
                ]
            }
        ]
    }
});

This overrides the default configuration, which excludes node_modules from bring transpiled.

来源：https://stackoverflow.com/questions/55098621/laravel-mix-not-transpiling-vendor-js-to-es5

标签

Webpack

ecmascript-6

ecmascript-5

laravel-mix