通过@babel/plugin-transform-modules-commonjs转换之后的文件不能被require引入

Question

问题描述

gulp.src('src/router/*.js')
        .pipe(babel({
            plugins: ['@babel/plugin-transform-modules-commonjs']
        }))
        .pipe(gulp.dest('temp'));

经过上面的代码转换之后：

"use strict";

var _interopRequireDefault = require("/Users/wang/Documents/workspace/douban/douban-h5/node_modules/@babel/runtime-corejs2/helpers/interopRequireDefault");

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

var _toConsumableArray2 = _interopRequireDefault(require("/Users/wang/Documents/workspace/douban/douban-h5/node_modules/@babel/runtime-corejs2/helpers/esm/toConsumableArray"));

var _home = _interopRequireDefault(require("./home.router"));

var _rank = _interopRequireDefault(require("./rank.router"));

var routers = [].concat((0, _toConsumableArray2.default)(_home.default), (0, _toConsumableArray2.default)(_rank.default));
var _default = routers;
exports.default = _default;

在使用require引入转换后的文件时出现问题：

/Users//Documents/workspace/douban/douban-h5/node_modules/@babel/runtime-corejs2/helpers/esm/toConsumableArray.js:1
(function (exports, require, module, __filename, __dirname) { import arrayWithoutHoles from "./arrayWithoutHoles";
                                                                     ^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

查看之后发现是因为/Users/wang/Documents/workspace/douban/douban-h5/node_modules/@babel/runtime-corejs2/helpers/esm/toConsumableArray.js文件使用的还是es6规范

import arrayWithoutHoles from "./arrayWithoutHoles";
import iterableToArray from "./iterableToArray";
import nonIterableSpread from "./nonIterableSpread";
export default function _toConsumableArray(arr) {
  return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();
}

该如何是好？

Answer 1

楼主怎么解决的呀