Я недавно обнаружил в одном из моих проектов, что почти весь мой JS код разрывается в Edge 18 после использования синтаксиса отдыха / распространения объекта. Это было удивительно для меня, так как я ожидал, что babel преобразует это в Edge-совместимый код, но, как я выяснил, это не так. Поэтому мы выбрали @ babel / plugin-offer-object-rest-spread , добавили его в конфигурацию моего веб-пакета и снова запустили. Но без удачи. Я использовал опцию отладки babel, чтобы проверить, используется ли плагин, и вывод говорит, что это так. Но когда я проверяю трансплантированный JS, я все равно нахожу синтаксис спреда там совершенно нетронутым.
Вывод отладочной информации Babel:
Using targets:
{
"android": "4.4",
"chrome": "74",
"edge": "17",
"firefox": "67",
"ios": "10",
"safari": "10"
}
Using modules transform: false
Using plugins:
transform-template-literals { "android":"4.4", "ios":"10", "safari":"10" }
transform-literals { "android":"4.4" }
transform-function-name { "android":"4.4", "edge":"17" }
transform-arrow-functions { "android":"4.4" }
transform-block-scoped-functions { "android":"4.4" }
transform-classes { "android":"4.4" }
transform-object-super { "android":"4.4" }
transform-shorthand-properties { "android":"4.4" }
transform-duplicate-keys { "android":"4.4" }
transform-computed-properties { "android":"4.4" }
transform-for-of { "android":"4.4" }
transform-sticky-regex { "android":"4.4" }
transform-dotall-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
transform-unicode-regex { "android":"4.4", "ios":"10", "safari":"10" }
transform-spread { "android":"4.4" }
transform-parameters { "android":"4.4", "edge":"17" }
transform-destructuring { "android":"4.4", "edge":"17" }
transform-block-scoping { "android":"4.4", "ios":"10", "safari":"10" }
transform-new-target { "android":"4.4" }
transform-regenerator { "android":"4.4" }
transform-exponentiation-operator { "android":"4.4", "ios":"10", "safari":"10" }
transform-async-to-generator { "android":"4.4", "ios":"10", "safari":"10" }
proposal-async-generator-functions { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
proposal-object-rest-spread { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
proposal-unicode-property-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
proposal-json-strings { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
proposal-optional-catch-binding { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
transform-named-capturing-groups-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
Using polyfills with `usage` option:
[/app/node_modules/swiper/dist/js/swiper.esm.js] Added following core-js polyfills:
es.array.concat { "android":"4.4" }
es.array.filter { "android":"4.4" }
es.array.find { "android":"4.4" }
es.array.includes { "android":"4.4" }
es.array.index-of { "android":"4.4" }
es.array.map { "android":"4.4" }
es.array.slice { "android":"4.4" }
es.array.sort { "android":"4.4", "ios":"10", "safari":"10" }
es.array.splice { "android":"4.4" }
es.object.get-own-property-descriptor { "android":"4.4" }
es.object.keys { "android":"4.4" }
es.object.to-string { "android":"4.4" }
es.parse-float { "android":"4.4" }
es.parse-int { "android":"4.4" }
es.regexp.to-string { "android":"4.4", "edge":"17" }
es.string.includes { "android":"4.4", "edge":"17" }
es.string.match { "android":"4.4", "edge":"17" }
es.string.replace { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
es.string.split { "android":"4.4", "edge":"17" }
esnext.array.last-index { "android":"4.4", "chrome":"74", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
web.dom-collections.for-each { "android":"4.4" }
64% building 687/752 modules 65 active /app/node_modules/lodash-es/padStart.js
[/app/node_modules/dom7/dist/dom7.modular.js] Added following core-js polyfills:
es.array.concat { "android":"4.4" }
es.array.filter { "android":"4.4" }
es.array.index-of { "android":"4.4" }
es.array.splice { "android":"4.4" }
es.object.assign { "android":"4.4" }
es.object.keys { "android":"4.4" }
es.parse-float { "android":"4.4" }
es.string.match { "android":"4.4", "edge":"17" }
es.string.replace { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
es.string.split { "android":"4.4", "edge":"17" }
es.string.trim { "android":"4.4", "ios":"10", "safari":"10" }
web.dom-collections.for-each { "android":"4.4" }
Hash: b3541120009438066b1e
Version: webpack 4.30.0 / grunt-webpack 3.1.3
Так что с тех пор я отчаянно пытаюсь заставить babel перейти на трансплантацию. код, но ничего не происходит, и у меня закончились идеи и поисковые запросы. Что делает его еще более странным, так это то, что стек, который я использовал, не является чем-то особенным, и я использовал его уже в других проектах, и у меня никогда не было такой проблемы.
Я использую Vue, Webpack + Babel. Webpack запускается через Grunt.
Моя конфигурация webpack:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = function (grunt, options) {
/* skip loading if task is not necessary for current target */
if (!grunt.isConfigLoadingRequired('webpack')) {
return {};
}
return (function () {
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const DotenvPlugin = require('dotenv-webpack');
const webpack = require('webpack');
const plugins = [
new webpack.IgnorePlugin(/^(.*)$/, /node-jsb$/),
new DotenvPlugin(),
new VueLoaderPlugin(),
];
/* remember to update jest transformer at tests/setup/ when changing loader options */
const getLoaderRulesConfig = (targets, debug = false) => ([
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
enforce: 'pre',
loader: 'import-glob',
include: [path.resolve('<%= paths.src %>')],
},
{
test: /\.js$/,
loader: 'babel-loader',
/* remember to update jest transformIgnorePatterns at grunt/config/jest.js when adding includes */
include: [
path.resolve('<%= paths.src %>'),
path.resolve('node_modules/dom7'),
path.resolve('node_modules/swiper'),
],
options: {
compact: true,
cacheDirectory: true,
cacheCompression: false,
babelrc: false,
plugins: [
[
'@babel/plugin-transform-runtime', {
regenerator: false,
useESModules: true,
},
],
'@babel/plugin-proposal-object-rest-spread',
['@babel/plugin-proposal-class-properties', { loose: true }],
],
presets: [
[
'@babel/preset-env', {
modules: false,
loose: true,
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true },
targets,
debug,
},
],
],
},
},
]);
return {
options: {
cache: true,
entry: {
main: './<%= paths.src %>/js/_main.js',
},
output: {
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js',
path: path.resolve('<%= paths.static %>/generated/'),
publicPath: '/static/generated/',
},
plugins,
resolve: {
mainFields: ['browser', 'main', 'module'],
symlinks: false,
},
performance: {
maxEntrypointSize: 500000,
maxAssetSize: 500000,
},
},
analyze: {
mode: 'production',
watch: true,
stats: {
maxModules: 99999,
},
optimization: {
concatenateModules: false,
},
output: {
path: path.resolve('<%= paths.tmp %>/js/'),
},
module: {
rules: getLoaderRulesConfig({ esmodules: true }, true),
},
plugins: [new BundleAnalyzerPlugin()],
},
dev: {
mode: 'development',
module: {
rules: getLoaderRulesConfig({ browsers: options.browserslist }, true),
},
},
devModern: {
mode: 'development',
devtool: 'source-map',
module: {
rules: getLoaderRulesConfig({ esmodules: true }),
},
output: {
filename: '[name].modern.js',
chunkFilename: '[name].modern.[chunkhash].js',
},
},
dist: {
mode: 'production',
module: {
rules: getLoaderRulesConfig({ browsers: options.browserslist }),
},
},
distModern: {
mode: 'production',
module: {
rules: getLoaderRulesConfig({ esmodules: true }),
},
output: {
filename: '[name].modern.js',
chunkFilename: '[name].modern.[chunkhash].js',
},
},
};
}());
};
Мне бы очень хотелось услышать ваши мысли, и я подумаю, что я, возможно, пропустил!