Laravel混合转译依赖

Question

我正在尝试在一个laravel mix项目中使用vuex-module-decorators库(使用typescript)。但我一直收到错误Uncaught TypeError: Class constructor VuexModule cannot be invoked without 'new'。这似乎是一个known issue，可以通过将transpileDependencies: ['vuex-module-decorators']添加到我的vue.config.js文件中来解决，这将告诉babel转译该包。

因为我使用的是laravel mix，所以添加一个vue.config.js文件不会做任何事情。我不知道如何告诉laravel mix来转换vuex-module-decorators依赖。

我尝试将{ test: /\.js$/, loaders: ['babel-loader'] },添加到webpack.mix.js中的webpack配置中(也显式包含了依赖项)，但不起作用。

那么，我如何告诉laravel mix将vuex-模块-装饰器依赖项转换为es5？

如果有帮助，下面是我的webpack.mix.js文件：

mix
  .ts('resources/ts/app.ts', 'public/js')
  .stylus('resources/stylus/app.styl', 'public/css');

Answer 1

我能够将babel-loader指向所有的.js文件，这是可行的：

// In webpack.mix.js
mix.webpackConfig({
   module: {
     rules: [{
       test: /\.js?$/,
       use: [{
         loader: 'babel-loader',
         options: mix.config.babel()
       }]
     }]
   }
 });

但是，如果使用更具体的test只针对需要转换的模块，则编译时间将会减少：

    test: /node_modules\/(vuex-module-decorators|vuex-persist)\/.+\.js$/,

Answer 2

我发布了一个处理node_modules依赖转换的Laravel Mix扩展：Laravel Mix Transpile Node Modules。

// Transpile all node_modules dependencies
mix.transpileNodeModules()

// Transpile selected dependencies
mix.transpileNodeModules(['swiper', 'dom7'])