Конфигурирование webpack и babel для преобразования остальных аргументов в зависимость node_modules - PullRequest
Новая
       21

Конфигурирование webpack и babel для преобразования остальных аргументов в зависимость node_modules

1 голос
/ 26 марта 2020

Я использую webpack и babel для компиляции JavaScript в ES5. Он прекрасно работает с моим собственным кодом, но моя библиотека начала выдавать ошибки в браузерах Inte rnet Explorer, когда я добавил debug в качестве зависимости. Ошибка указывает на параметр rest (например, function(...t)), поскольку анализ места не удался.

Основной файл в модуле отладки - ES6 (, и он не изменится ), и, к сожалению, там, кажется, нет никакого руководства по настройке babel для зависимостей node_modules.

Вывод CLI, похоже, не содержит ничего показательного. Выходные файлы создаются, как и ожидалось, и они работают в современных браузерах. Это просто тот параметр покоя, от которого я не могу избавиться.

Может кто-нибудь указать мне правильное направление? Похоже, что @ babel / plugin-transform-parameters должен решить проблему, но ни один из вариантов конфигурации, которые я пробовал, не оказал влияния на код отладки.

Редактировать: После более пристального взгляда кажется, что проблема может заключаться в том, что вавилон делает слишком много транспиляции, а не недостаточно. Похоже, этот бит кода из node_modules/debug/dist/debug.js преобразуется в параметр проблемного c отдыха.

IN: 

        function log() {
          var _console;

          // This hackery is required for IE8/9, where
          // the `console.log` function doesn't have 'apply'
          return (typeof console === "undefined" ? "undefined" : _typeof(console)) === 'object' && console.log && (_console = console).log.apply(_console, arguments);
        }

OUT: 

function(n){e.log=function(...A){return"object"==typeof console&&console.log&&console.log(...A)}

Я попытался включить мой каталог с исходным кодом и модуль отладки в виде массива: 

      {
        loader: 'babel-loader',
        test: [path.resolve(__dirname, 'src'), /node_modules\/debug/]
      },

Я попытался включить все .js файлы, но исключая большинство подкаталогов node_modules ... 

      {
        loader: 'babel-loader',
        test: /(\.jsx|\.js)$/,
        exclude: /node_modules\/(?!debug)/
      },

Даже разбиение на несколько правил: 

      {
        loader: 'babel-loader',
        test: /(\.jsx|\.js)$/,
        exclude: /node_modules/
      },
      {
        loader: 'babel-loader',
        test: /node_modules\/debug/
      },

Использование функции дало тот же эффект: 

const shouldExclude = filename => {
  if (/my-project[\\\/]src/.test(filename)) return false;
  if (/my-project[\\\/]test/.test(filename)) return false;
  if (/my-project[\\\/]node_modules[\\\/]debug/.test(filename)) return false;

  return true;
};
...
  module: {
    rules: [{ test: /\.js$/, exclude: shouldExclude, use: ['babel-loader'] }],
  },

Вот наиболее полные конфигурационные файлы, для справки

пакет. json

{
  "name": "my-js-library",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/plugin-transform-object-assign": "^7.8.3",
    "@babel/plugin-transform-parameters": "^7.9.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.0",
    "@babel/register": "^7.9.0",
    "@babel/runtime": "^7.9.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-add-module-exports": "^1.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^7.0.0-beta.3",
    "classlist-polyfill": "^1.2.0",
    "debug": "4.1.1",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-html": "^6.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "yargs": "^15.3.1"
  },
  "dependencies": {}
}

.babelr c

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "babel-plugin-add-module-exports",
    "transform-class-properties",
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-parameters"
  ]
}

webpack.config. js

const config = {
  mode: 'production,
  entry: __dirname + '/src/index.js',
  devtool: 'source-map',
  output: {
    path: __dirname + '/lib',
    filename: my-js-library.min.js,
    library: 'MyJsLibrary',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /node_modules\/debug/,
        loader: 'babel-loader',
      },
      {
        test: /(\.jsx|\.js)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
      },
    ],
  },
  stats: 'minimal',
  resolve: {
    modules: [path.resolve('./node_modules'), path.resolve('./src')],
    extensions: ['.json', '.js'],
  },
};

module.exports = config;
...