从不同的路径获取Laravel Mix以转换JS

Question

我正在使用Laravel Mix，它很好地简化了使用WebPack和Babel将高级JS功能转换为旧版浏览器 - 除了！ （而且我在这里疯了）...如果我把JS转换成他们推荐的目录，它只适用于我。

基本推荐的“webpack.mix.js”设置是mix.js(['resources/js/app.js'], 'public/js/app.js');，其中第一个参数可以是单个文件或要转换的文件数组。

默认的resources/js/app.js需要几个标准模块，如vue，lodash，axios。效果很好。然后在app.js我想要从vendor/xxxx/assets/js/xx.js需要一些额外的来源 - 但我得到一个错误：Unknown plugin "transform-object-rest-spread" specified - 这意味着它找不到绝对安装的babel插件。这是路径的一部分。

如果我将xx.js复制到resources/jsand然后在app.js中要求它，没问题。

我已经使用mix.webpackConfig添加模块路径vendor/xxxx/assets/js，我已经使用alisas设置'xx$': path.resolve(__dirname,"vendor/xxxx/assets/js/xx.js"，并尝试使用.babelrc和webpackConfig选项对象中的babel选项。

最终的webpack配置的一个版本在下面 - 相信我，我玩了很多变种，我知道这不是正确的，但没有任何东西可以导入/要求/转换任何node_modules之外的任何文件（ vue）或/ resources / js（app.js，也可能需要该目录中的其他文件）。任何想法都会很棒！

{ context: 'C:\\www\\Laravels\\lsbb-5-3\\laravel',
  entry: 
   { '/mixed/js/es6': 
      [ 'C:\\www\\Laravels\\lsbb-5-3\\laravel\\resources\\js\\app.js',
        'C:\\www\\Laravels\\lsbb-5-3\\laravel\\vendor\\xxxx\\js\\xx.js' ] },
  output: 
   { path: 'C:\\www\\Laravels\\lsbb-5-3\\laravel\\public',
     filename: '[name].js',
     chunkFilename: '[name].js',
     publicPath: '/' },
  module: 
   { rules: 
      [ { test: /\.html$/, loaders: [ 'html-loader' ] },
        { test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
          loaders: 
           [ { loader: 'file-loader',
               options: { name: [Function: name], publicPath: '/' } },
             { loader: 'img-loader',
               options: { enabled: true, gifsicle: {}, mozjpeg: {}, optipng: {}, svgo: {} } } ] },
        { test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
          loader: 'file-loader',
          options: { name: [Function: name], publicPath: '/' } },
        { test: /\.(cur|ani)$/,
          loader: 'file-loader',
          options: { name: '[name].[ext]?[hash]', publicPath: '/' } },
        { test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          use: 
           [ { loader: 'babel-loader',
               options: 
                { cacheDirectory: true,
                  presets: 
                   [ [ 'env',
                       { modules: false,
                         targets: { browsers: [ '> 2%' ], uglify: true } } ] ],
                  plugins: 
                   [ 'transform-object-rest-spread',
                     [ 'transform-runtime', { polyfill: false, helpers: false } ],
                     [ 'transform-object-rest-spread' ] ] } } ] },
        { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
        { test: /\.s[ac]ss$/,
          exclude: [],
          loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] },
        { test: /\.less$/,
          exclude: [],
          loaders: [ 'style-loader', 'css-loader', 'less-loader' ] } ] },
  plugins: 
   [ FriendlyErrorsWebpackPlugin {
       compilationSuccessInfo: {},
       onErrors: undefined,
       shouldClearConsole: true,
       formatters: [ [Function: format], [Function: format], [Function: format] ],
       transformers: 
        [ [Function: transform],
          [Function: transform],
          [Function: transform] ] },
     DefinePlugin {
       definitions: { 'process.env': { NODE_ENV: '"development"' } } },
     LoaderOptionsPlugin {
       options: 
        { minimize: false,
          options: 
           { context: 'C:\\www\\Laravels\\lsbb-5-3\\laravel\\node_modules\\laravel-mix\\src\\builder',
             output: { path: './' } },
          test: { test: [Function: test] } } },
     ManifestPlugin {},
     CustomTasksPlugin {},
     BuildCallbackPlugin { callback: [Function] },
     { options: 
        { title: 'Laravel Mix',
          alwaysNotify: true,
          hint: undefined,
          contentImage: 'C:\\www\\Laravels\\lsbb-5-3\\laravel\\node_modules\\laravel-mix\\icons\\laravel.png' },
       lastBuildSucceeded: false,
       isFirstBuild: true } ],
  stats: 
   { hash: false,
     version: false,
     timings: false,
     children: false,
     errorDetails: false,
     chunks: false,
     modules: false,
     reasons: false,
     source: false,
     publicPath: false },
  performance: { hints: false },
  devtool: 'eval-source-map',
  devServer: 
   { headers: { 'Access-Control-Allow-Origin': '*' },
     contentBase: 'C:\\www\\Laravels\\lsbb-5-3\\laravel\\public',
     historyApiFallback: true,
     noInfo: true,
     compress: true,
     quiet: true },
  resolve: 
   { extensions: [ '*', '.js', '.jsx', '.vue' ],
     alias:
      { 'vue$': 'vue/dist/vue.common.js',
        'xx$': 'vendor/xxxx/js/xx.js',
     modules:
      [ 'node_modules',
        'vendor/xxxx/js' ] } }

Answer 1

AHH！经过几天几夜，我终于明白了！有问题的文件有点像我在几个项目中使用的库，所以我只是将目录符号链接到项目中。我一直这样做，没有各种构建和项目工具的问题，所以我没有考虑。

但事实证明，Babel（或WebPack中的Babel）在尝试遵循符号链接时会中断！

所以我不能说我找到了解决办法，但我找到了合适的解决办法。我的构建过程的第一步我只是将源目录中的文件复制到项目目录中。多恶心，但实际上我的目的是正常的 - 这只是在一个位置编辑库，所以我不喜欢不同的版本。所以我可以编辑源码和构建＆瞧！

如果你有这个问题，并且想要做到正确，那么应该有额外的插件来帮助babel解决这些路径问题但是一旦我弄清楚问题是什么，我就不会被打扰。祝其他人好运！