使用Babel转换代码后在HTML中出现require未定义问题的咨询及前端模块开发实用教程需求

你遇到的问题其实是很多前端新手都会踩的坑——Babel只负责语法转换，不负责模块打包。它把ES6的import转成了Node.js的CommonJS规范的require，但浏览器本身并没有内置require函数，所以才会报错。下面我给你一套最新的、分步清晰的实操方案，帮你彻底解决这个问题：

一、先搞懂核心概念：Babel和打包工具的区别 #

• Babel：把ES6+的语法（箭头函数、let/const、import/export等）转换成浏览器能识别的ES5语法，但不会处理模块之间的依赖关系，也不会把多个文件打包成一个文件。
• 打包工具（比如Webpack/Rollup）：负责把你的所有模块（包括你自己的代码、npm包）打包成一个或多个浏览器能直接运行的JS文件，同时处理模块依赖。

所以我们需要把Babel和Webpack结合起来用，既转换语法，又打包模块。

二、分步实操：用Webpack + Babel搭建可运行的浏览器项目 #

1. 初始化项目并安装依赖 #

首先回到你的新项目目录，执行以下命令安装所需工具：

# 安装Webpack核心和CLI
npm install webpack webpack-cli --save-dev
# 安装Babel相关依赖（用于在Webpack中转换代码）
npm install @babel/core babel-loader @babel/preset-env --save-dev
# 安装core-js用于polyfill（兼容旧浏览器）
npm install core-js@3 --save

2. 配置Webpack #

在项目根目录创建webpack.config.js文件，内容如下：

module.exports = {
  // 入口文件：你的index.js
  entry: './index.js',
  // 输出配置：打包后的文件会放在dist目录下的bundle.js
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        // 对所有.js文件使用babel-loader转换
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules里的文件，不用转换
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: {
                    edge: '17',
                    firefox: '60',
                    chrome: '67',
                    safari: '11.1'
                  },
                  useBuiltIns: 'usage',
                  corejs: '3.6.5'
                }
              ]
            ]
          }
        }
      }
    ]
  },
  mode: 'development' // 开发模式，方便调试；生产环境改成'production'
};

3. 修改你的index.js代码 #

注意：你的npm包kosciej16-paczka是用CommonJS导出的（exports.printMsg），所以在ES6的import里需要正确引入：

// 因为你的包导出的是一个对象，不是默认导出，所以要这样写
import { printMsg } from "kosciej16-paczka";
printMsg();

或者如果你想继续用默认导入，可以修改你的npm包代码为：

exports.default = function() { console.log("This is a message from the demo package"); }
// 同时保留原来的导出，兼容两种方式
exports.printMsg = exports.default;

4. 执行打包命令 #

在package.json里添加一个打包脚本：

{
  "scripts": {
    "build": "webpack"
  }
}

然后执行：

npm run build

执行完后，项目根目录会生成dist/bundle.js文件，这就是浏览器能直接运行的打包后的代码。

5. 修改HTML文件引用打包后的文件 #

把你的som.html里的脚本引用改成打包后的文件：

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

现在打开HTML文件，浏览器就能正常运行，不会再出现"require is not defined"的错误了！

三、额外方案：如果不想用Webpack，用Babel转成UMD模块 #

如果你只是想快速测试，不想用Webpack，可以用@babel/plugin-transform-modules-umd把代码转成UMD格式，这样既能在Node.js里用，也能在浏览器里用：

1. 安装插件：

npm install @babel/plugin-transform-modules-umd --save-dev

2. 修改Babel配置（.babelrc或babel.config.json）：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-modules-umd"]
}

3. 转译代码：

npx babel index.js --out-file bundle.js

4. 在HTML里引用bundle.js，然后通过全局变量调用：

<body>
HA
<script src="./bundle.js"></script>
<script>
  // UMD会把模块挂载到全局变量上，变量名一般是包名的驼峰形式
  kosciej16Paczka.printMsg();
</script>
</body>

不过这种方式只适合简单场景，复杂项目还是推荐用Webpack/Rollup这类打包工具。

总结 #

Babel的输出其实是符合CommonJS/AMD/UMD等模块规范的代码，不是直接给浏览器用的，需要配合打包工具或者模块加载器才能在浏览器中运行。上面的Webpack方案是现在前端项目的标准做法，能处理各种复杂的模块依赖和兼容问题。

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