JS代码迁移至ES6后，Babel转译代码在HTML中用import无弹窗

嘿，我帮你拆解下你遇到的问题：你用Babel转译了ES6代码，但在HTML里跑转译后的文件时，用到import的弹窗没出来，核心原因其实是Babel默认只转译ES6语法（比如箭头函数、const/let），不处理模块加载逻辑——它会把ES6的import转成Node.js环境的require，但浏览器根本不认require这玩意儿，代码直接报错停住了，弹窗自然就出不来。

下面给你两种实用的解决方案，按需选择就行：

方案一：用Webpack打包（推荐用于生产环境） #

打包工具能把所有模块合并成浏览器能直接识别的文件，同时帮你完成转译，一步到位：

• 先安装必要的依赖：

  npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev
  

• 在项目根目录新建webpack.config.js，配置内容如下（记得替换成你的实际文件路径）：

  module.exports = {
    entry: './src/你的入口文件.js', // 改成你的ES6源文件路径
    output: {
      filename: 'bundle.js',
      path: __dirname + '/dist'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  };
  

• 打开package.json，在scripts里添加打包命令：

  "scripts": {
    "build": "webpack --mode production"
  }
  

• 运行npm run build，Webpack会把所有模块打包成dist/bundle.js，然后在HTML里引用这个打包后的文件即可：

  <script src="./dist/bundle.js"></script>
  

方案二：让浏览器直接支持ES模块（适合开发调试） #

如果只是开发阶段想快速验证，不想用打包工具，可以这么搞：

• 修改你的.babelrc配置，让Babel保留ES模块语法，别转成CommonJS：

  {
    "presets": [
      ["@babel/preset-env", {
        "modules": false, // 关键：禁止转成require语法
        "targets": {
          "browsers": ["last 2 versions", "not ie <= 11"]
        }
      }]
    ]
  }
  

• 重新转译代码后，在HTML里引用转译后的文件时，必须加上type="module"属性：

  <script type="module" src="./dist/你的转译后文件.js"></script>
  

  注意：这种方式有个小限制——不能直接双击打开本地HTML文件（会有跨域问题），得用本地服务器运行，比如WebStorm自带的开发服务器，或者用npx serve启动一个临时服务器。

额外排查小技巧 #

记得打开浏览器的开发者工具（按F12），切换到Console标签看看有没有报错信息——比如如果看到require is not defined，就完全对应我们上面说的模块问题，照着方案改就行；要是有路径报错，就检查下import的文件路径是不是写错了。

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