Я использую 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" и пытался возиться с опциями babel, как в .babelrc, так и в объекте опции webpackConfig.
Ниже приведена одна версия окончательной конфигурации веб-пакета - поверьте мне, я играл со многими вариантами, я знаю, что это не тот вариант, но ничего не помогло импортировать / требовать / переносить любой файл за пределами либо 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' ] } }