Laravel Mix没有将vendor.js转换为es5 [英] Laravel Mix not transpiling vendor.js to es5

问题描述

Laravel Mix似乎无法将vendor.js和manifest.js转换为ES5.在iPhone Safari和IE 11上失败.

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

IE DevTools显示以下错误:

IE DevTools shows these errors:

它似乎仍然具有ES6功能:

And it appears that it still has ES6 features:

其他文件似乎可以转存，例如app.js和块.

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

这是我的webpack.mix.js

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()
}

还有我的.babelrc

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

我尝试了以下操作:

1. 安装babel-preset-es2015并将es2015添加到我的.babelrc预设中.
2. 将.babel('[...]/vendor.js', '[...]/vendor.es5.js')添加到我的webpack.mix.js

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

如何获取vendor.js和manifest.js文件以移植到ES5?或者至少可以使其与IE 11和iPhone Safari一起使用.

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.

推荐答案

经过一些研究，很明显Laravel Mix 4.x不会移植包含的软件包.为此，请在混合命令之前将以下内容添加到您的webpack.mix.js文件中:

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()
                    }
                ]
            }
        ]
    }
});

这将覆盖默认配置，该默认配置将node_modules排除在转译带来的范围之外.

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

这篇关于Laravel Mix没有将vendor.js转换为es5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！