【发布时间】：2019-02-11 21:14:45
【问题描述】：
我正在使用 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/js 然后在 app.js 中要求它，没问题。
我使用mix.webpackConfig 添加模块路径vendor/xxxx/assets/js，我使用别名设置'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' ] } }
【问题讨论】：
-
sweetalert
import swal from 'sweetalert2';的示例，lodash.tonumberimport toNumber from 'lodash.tonumber';的示例 -
是的，但这些通常在
node_modules内 - 我对此没有任何问题。我的问题是“需要”该目录之外的东西。也许问题是使用“import”语法而不是“require”？ -
只使用相对路径，
../../somefile.js。 -
是的，我试过了——webpack 发现文件没问题，在它上面运行 babel 进行转译，但是 babel 找不到自己的插件：
Unknown plugin "transform-object-rest-spread" specified——但是如果要转译的文件在 node_modules 中，babel DOES 找到那个插件 - 顺便说一下，它也在 node_modules 中......
标签： laravel webpack laravel-mix