Включая вспомогательные методы webpack и полифиллы только в основной комплект - PullRequest
Новая
       156

Включая вспомогательные методы webpack и полифиллы только в основной комплект

0 голосов
/ 11 марта 2020

Я использую веб-пакет для сборки React, но мне все еще нужно перенести нашу унаследованную базу кода, написанную простым javascript. До сих пор он работал, но я заметил, что поскольку webpack обрабатывает каждый файл javascript как отдельный пакет, он также внедряет свои вспомогательные методы и полифилы в каждый файл. Было бы лучше, если бы они были включены только в основной файл javascript и таким образом уменьшали бы размер последующих файлов.

Есть ли способ достичь этого?

Если кому-то интересно, как я передаю каждый устаревший файл js в отдельности. 

            glob.sync(PATH).forEach((file) => {
                    exports.push({
                        entry: file,
                        output: {
                            path: path.resolve(__dirname),
                            filename: file,
                        },
                        module: {
                            rules: [
                                {
                                    test: /\.js$/,
                                    exclude: /node_modules/,
                                    loader: 'babel-loader'
                                }]
                        },
                        devtool: 'eval',
                    });
            });

1 Ответ

0 голосов
/ 11 марта 2020

Я нашел способ, и вот как мои настройки выглядят как текущие.

.babelr c "useBuiltIns": "entry" делает так, чтобы вы заполняли (и вспомогательные методы) тоже?) вставляются только по запросу. Другими словами, когда вы вызываете «импорт» вверху файла. Это позволяет мне создавать файл полифайла. js, в котором нет ничего, кроме import "core- js"; , который превращается в файл гораздо большего размера со всеми необходимыми мне полифилами. 

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": "3.6.4",
        "useBuiltIns": "entry",
        "targets": {
          "ie": "11"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/transform-runtime"
  ],
  "sourceType": "unambiguous"
}

конфигурация webpack для этих файлов выглядит следующим образом (коллекция экспорта в конечном итоге назначается для module.exports). 

            glob
                .sync(PATH)
                .forEach((file) => {

                        let config = {
                            entry: file,
                            output: {
                                path: path.resolve(__dirname),
                                filename: file,
                            },
                            module: {
                                rules: [
                                    {
                                        test: /\.js$/,
                                        exclude: /node_modules/,
                                        loader: 'babel-loader'
                                    }],
                            }
                        };

                        exports.push(config)
            });

не нужно говорить, что polyfill. js это первый скрипт, вызванный в моем html.

...