Это правильный способ, чтобы Babel транспортировать весь node_modules? - PullRequest
Новая
       85

Это правильный способ, чтобы Babel транспортировать весь node_modules?

0 голосов
/ 22 апреля 2019

Мне удалось заставить работать веб-пакет без ошибок.Тем не менее, я даже не уверен, что делаю это правильно.

Я использую множество узловых модулей es6, поэтому я решил получить babel для преобразования всего, кроме 100% es5.

Таким образом, я создал белый список для перехода на включение веб-пакета вместо использования ключа исключения. 

"dependencies": {
"@babel/runtime-corejs3": "7.4.3",
"@polymer/app-layout": "3.0.2",
"@polymer/iron-flex-layout": "3.0.1",
"@polymer/iron-icon": "3.0.1",
"@polymer/iron-icons": "3.0.1",
"@polymer/iron-iconset": "3.0.1",
"@polymer/iron-iconset-svg": "3.0.1",
"@polymer/iron-overlay-behavior": "3.0.2",
"@polymer/paper-icon-button": "3.0.2",
"@polymer/paper-input": "3.0.2",
"@polymer/paper-item": "3.0.1",
"@polymer/paper-material": "3.0.1",
"@polymer/paper-ripple": "3.0.1",
"@polymer/paper-spinner": "3.0.2",
"@polymer/paper-toast": "3.0.1",
"@polymer/polymer": "3.2.0",
"@webcomponents/webcomponentsjs": "2.2.10",
"babel-loader-exclude-node-modules-except": "1.0.1",
"lit-element": "2.1.0",
"lit-html": "1.0.0",
"pwa-helpers": "0.9.1",
"redux": "4.0.1",
"redux-thunk": "2.3.0",
"reselect": "4.0.0"
},
"devDependencies": {
"@babel/core": "7.4.3",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-transform-runtime": "7.4.3",
"@babel/polyfill": "7.4.3",
"@babel/preset-env": "7.4.3",
"acorn": "6.1.1",
"are-you-es5": "1.1.0",
"autoprefixer": "9.5.1",
"babel-eslint": "11.0.0-beta.0",
"babel-loader": "8.0.5",
"babel-plugin-template-html-minifier": "2.3.0",
"browserslist": "4.5.5",
"caniuse-lite": "1.0.30000962",
"clean-webpack-plugin": "2.0.1",
"copy-webpack-plugin": "5.0.1",
"core-js": "3.0.1",
"cssnano": "4.1.10",
"es-check": "5.0.0",
"eslint": "6.0.0-alpha.0",
"glob": "7.1.3",
"handlebars": "4.1.1",
"handlebars-loader": "1.7.1",
"html-minifier": "4.0.0",
"html-webpack-plugin": "4.0.0-beta.5",
"js-beautify": "1.9.1",
"lighthouse": "4.3.0",
"node-json-minify": "1.0.0",
"obsolete-webpack-plugin": "0.5.6",
"postcss-cli": "6.1.2",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"script-ext-html-webpack-plugin": "2.1.3",
"terser": "3.17.0",
"terser-webpack-plugin": "1.2.3",
"webpack": "4.30.0",
"webpack-cli": "3.3.1",
"webpack-dev-server": "3.3.1",
"webpack-merge": "4.2.1",
"workbox-webpack-plugin": "4.3.0"
},

Это был package.json, и это использование babel-loader:

const NodeModulesES5Whitelist = require('babel-loader-exclude-node-modules-except');

rules:
[
  {
    test:    /\.js$/,
    exclude: /node_modules/,
    use:
    [
      {
        loader: 'babel-loader'
      },
      {
        loader: resolve('./conf/global/webpack/custom-loader.js')
      }
    ]
  },
  {
    test:    /\.js$/,
    include: NodeModulesES5Whitelist([
      '@babel/runtime-corejs3',
      'core-js',
      'regenerator-runtime',
      'regenerator-transform',
      '@webcomponents/webcomponentsjs'
    ]),
    use:
    [
      {
        loader: 'babel-loader'
      },
      {
        loader: resolve('./conf/global/webpack/custom-loader.js')
      }
    ]
  }
]

Кажется, что все работает без консольных ошибок, я запустил тесты на код и все, как я хочу, es5.Это нормальный способ сделать это?Ранее я пытался использовать метод exclude, где вы исключаете модули узлов, за исключением нескольких модулей es6, однако это привело к тому, что для меня в папке build был код, не относящийся к es5, и у меня возникли проблемы с ошибками, связанными с классом es6, вызывающим преобразованный класс.или наоборот.

Если все работает хорошо, должен ли я быть доволен этим результатом?Или вы думаете, мне нужно добавить в белый список еще несколько модулей, которые никогда не должны обрабатываться через babel?

...