Почему babel-loader не трансформирует объект покоя / распространения? - PullRequest
2 голосов
/ 27 апреля 2020

Я недавно обнаружил в одном из моих проектов, что почти весь мой 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',
                },
            },
        };
    }());
};

Мне бы очень хотелось услышать ваши мысли, и я подумаю, что я, возможно, пропустил!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...