在 gulp (v4) 中,我正在尝试使用 babel 为网站(也具有 es7 功能,例如Object.entries()
)转换多个 es6 模块,并将它们与 browserify 捆绑在一起。由于某种原因,Browserify 似乎没有从 runtime-corejs 加载 babel polyfill。相反,这出现在我的输出文件中:
require("core-js/modules/es.object.to-string.js");
...
require("core-js/modules/es.string.match.js");
var _fromEntries = _interopRequireDefault(require("/absolutePathOnMyLocalMachineToMyProjectRoot/node_modules/@babel/runtime-corejs3/core-js/object/from-entries.js"));
...
var _entries = _interopRequireDefault(require("/absolutePathOnMyLocalMachineToMyProjectRoot/node_modules/@babel/runtime-corejs3/core-js/instance/entries.js"));
var _config = require("../config.js");
这导致TypeError: _entries.default(...) is undefined
在运行时。我希望所有这些要求都已经加载?
由于我正在使用"useBuiltIns": "usage"
,我目前没有在 index.js 文件的顶部导入 core-js 和 regenerator-runtime。然而,在导入它们并设置时,结果是相同的"seBuiltIns": "entry"
。
问题
请有人指出如何配置 babel 和 browserify 以便在输出文件中包含所有必需的 polyfill,而不是在客户端浏览器中使用路径不可用的 require 语句?
我的配置和 gulp 任务如下。
吞咽 v4 任务
const jsLegacy = function () {
return browserify({
entries: "./src/index.js"
})
.transform(babelify)
.bundle()
.pipe(source( 'bundleIndex.js' ))
.pipe(buffer())
.pipe(gulp.dest("./dist/"))
}
babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"debug": true,
"useBuiltIns": "usage",
"corejs": 3,
"modules": "commonjs"
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": true,
"corejs": { "version": 3, "proposals": true },
"helpers": true,
"regenerator": true,
"version": "^7.15.4"
}
]
]
}
我的 package.json 的一部分
{
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.15.6",
"babelify": "^10.0.0",
"browserify": "^17.0.0",
"event-stream": "^4.0.1",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"dependencies": {
"@babel/runtime": "^7.15.4",
"@babel/runtime-corejs3": "^7.15.4",
"core-js": "^3.18.1",
"regenerator-runtime": "^0.13.9"
}
}