Question

我设法使webpack正常运行，没有任何错误。但是，我什至不确定自己是否以正确的方式进行操作。

我使用了很多es6的节点模块，所以我决定让babel转换除100％es5以外的所有内容。

因此，我做了一个白名单以传递到webpack的include而不是使用exclude键。

"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。这是一个好的方法吗？我尝试在排除节点模块（除少数es6模块之外）之前使用exclude方法，但是这在build文件夹中为我导致了一些非es5代码，并且我遇到了与调用转换类的es6类有关的错误或相反。

如果一切正常，我应该对这个结果感到满意吗？还是您认为我需要将其他一些不应通过babel处理的模块列入白名单？

这是babel转译整个node_modules的正确方法吗？

0 个答案: