时间戳

首页 > 解决方案 > Babel pollutes compiled file with template literals after removing plugin

webpack - Babel pollutes compiled file with template literals after removing plugin

问题描述

I use webpack with babel-loader to build my webclient, but ie11 screams at template literals. But I use the plugin @babel/plugin-transform-template-literals and the preset @babel/preset-env. The complained code lines are by babel itself.

BTW: If I use babel-CLI with only the literals plugin on the babelized file it converts it correct to string concats.

shorten package.json devDepencies and browserlist:

"browserslist": [
        "> 1%",
        "not dead",
        "ie >= 11"
    ],
    "devDependencies": {
        "@babel/cli": "^7.6.0",
        "@babel/core": "^7.6.0",
        "@babel/plugin-proposal-class-properties": "^7.5.5",
        "@babel/plugin-proposal-decorators": "^7.6.0",
        "@babel/plugin-transform-spread": "^7.2.2",
        "@babel/plugin-transform-template-literals": "^7.4.4",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.6.0",
        "@babel/types": "^7.6.1",
        "babel-loader": "^8.0.6",
        "babel-plugin-react": "1.0.0",
        "babel-plugin-react-html-attrs": "2.1.0",
        "babel-plugin-transform-object-assign": "6.22.0",
        "browserlist": "^1.0.1",
        "webpack": "^4.39.3"
    }

part of the webpack.js:

{
      test: /\.(js|jsx)?$/,
      exclude: /(node_modules|bower_components|disposables)/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            useBuiltIns: 'usage',
            //useBuiltIns: 'entry',
            corejs: { version: 3, proposals: true },
              debug: true,
            }],
          '@babel/preset-react',
        ],
        plugins: [
          'react-html-attrs',
          'transform-object-assign',
          ['@babel/plugin-proposal-decorators', {
            legacy: true
          }],
          ["@babel/plugin-proposal-class-properties", {
            "loose": true
          }],
          ['@babel/plugin-transform-spread', {
            'loose': true,
          }],
          //'syntax-dynamic-import',
          ['@babel/plugin-transform-template-literals', {
            //'loose': true,
          }],
        ],
        compact: true,
        minified: true,
      }

the complained area of the generated index.js (line with "throw new TypeError"):

/***/ "../node_modules/@babel/types/lib/asserts/assertNode.js":
/*!**************************************************************!*\
  !*** ../node_modules/@babel/types/lib/asserts/assertNode.js ***!
  \**************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = assertNode;

var _isNode = _interopRequireDefault(__webpack_require__(/*! ../validators/isNode */ "../node_modules/@babel/types/lib/validators/isNode.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function assertNode(node) {
  if (!(0, _isNode.default)(node)) {
    const type = node && node.type || JSON.stringify(node);
    throw new TypeError(`Not a valid node of type "${type}"`);
  }
}

/***/ }),

Error found:

Somewhere deep in the source was an unused import of an internal babel function. But those are nodeJS modules and don't run over babel itself. Killing the line solves the problem.

import { awaitExpression } from '@babel/types';

标签： webpackbabeljs

解决方案

解决方案位于源代码深处，内部 babel 函数的未使用导入。但这些是 nodeJS 模块，不会在 babel 本身上运行。杀线解决了问题。

import { awaitExpression } from '@babel/types';

“受感染”文件的开发者对发生的事情也有一个简单的解释。他使用带有“自动导入”插件的 VS Code。如果他键入“await”并意外接受了自动完成建议，则源包含“awaitExpression”。所以插件在 babel 中找到了这个“新类”，并将导入添加到 babel 文件中（文件顶部且看不见）。他更正了源中的“等待”，但导入仍然存在。一小段但具有破坏性的代码行。

推荐阅读