Gulp配合Babel使用import引入模块时报require未定义错误如何解决？

你当前遇到的错误核心原因是@babel/preset-env默认会将ES6的import语法转换为CommonJS规范的require调用，但浏览器原生不支持CommonJS规范，同时你的Gulp工作流只有语法转译环节，没有模块打包环节，无法处理依赖引入和CommonJS语法的兼容。

以下是无需使用Webpack的可落地解决方案： #

方案1：使用浏览器原生ESM支持（最轻量化） #

1. 修改.babelrc配置，禁止Babel转换模块语法：

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false
    }]
  ]
}

2. 调整代码中的引入路径：将import focusVisible from "focus-visible"改为具体的静态资源路径，你可以将node_modules/focus-visible/dist/focus-visible.min.js复制到项目的静态资源目录，例如src/js/libs/，然后修改引入语句为：

import focusVisible from './libs/focus-visible.min.js'

3. 在HTML中引入编译后的JS文件时，给script标签添加type="module"属性：

<script type="module" src="dist/js/main.min.js"></script>

方案2：使用gulp-browserify完成模块打包（兼容性最好） #

如果需要兼容不支持ESM的旧版浏览器，可以用browserify完成模块打包，不需要切换到Webpack：

1. 安装所需依赖：

npm install --save-dev gulp-browserify babelify

2. 修改你的Gulp脚本任务：

const browserify = require('gulp-browserify')

const changingScripts = () => {
  return src(['src/js/main.js', 'src/js/pages/**/*.js'], { read: false })
    .pipe(browserify({
      transform: ['babelify'],
      debug: false
    }))
    .pipe(fileinclude())
    .pipe(dest('dist/js'))
    .pipe(uglify({
      toplevel: true
    }).on('error', notify.onError()))
    .pipe(rename({
      extname: '.min.js'
    }))
    .pipe(dest('dist/js'))
    .pipe(browserSync.stream())
}

这个方案会自动把所有依赖打包到最终的JS文件里，不会生成require调用，兼容所有主流浏览器。 #

方案3：直接引入UMD版依赖（适配小项目） #

如果项目中第三方依赖非常少，可以直接在HTML中提前引入依赖的UMD版本，删除代码里的import语句即可：

<!-- 直接引入本地拷贝的focus-visible UMD文件 -->
<script src="js/libs/focus-visible.min.js"></script>
<script src="dist/js/main.min.js"></script>

引入后全局可直接调用focusVisible相关方法，不需要做任何模块相关的配置。

内容的提问来源于stack exchange，提问作者SineYlo