纯html项目配置babel，报错Uncaught ReferenceError: require is not defined

最新推荐文章于 2025-02-18 10:17:38 发布

前端卡卡西呀

最新推荐文章于 2025-02-18 10:17:38 发布

阅读量5.8k

点赞数 8

分类专栏：前端进阶之路文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/RedaTao/article/details/124602098

版权

前端进阶之路专栏收录该内容

145 篇文章

订阅专栏

需求描述

有时候想要写一个简单的测试 demo，只需要一个 html文件 + 一个js文件，但是需要 import 一些npm包，如何做简单的 babel 配置呢？

操作步骤

创建项目

mkdir demo
cd demo

此时 demo 目录下空空如也，什么也没有。

npm初始化

npm init

一路回车，此时 demo 下新增了一个 package.json 文件

新增 src/index.js 和 index.html 文件，目录结构如下：

| - src
|  |- index.js
| - index.html

src/index.js 内容：

import i18next from 'i18next';

i18next.init({
  lng: 'en', // if you're using a language detector, do not define the lng option
  debug: true,
  resources: {
    en: {
      translation: {
        "key": "hello world"
      }
    }
  }
});
// initialized and ready to go!
// i18next is already initialized, because the translation resources where passed via init function
document.getElementById('app').innerHTML = i18next.t('key');

index.html 内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

	<!-->因为后边会将babel编译后的文件放到 lib 目录下<-->
    <script src="./lib/index.js"></script>

</body>
</html>

参考babel使用文档安装所需依赖

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

在项目的根目录下创建一个命名为 babel.config.json 的配置文件（需要 v7.8.0 或更高版本），并将以下内容复制到此文件中：

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

运行如下命令，将 src下边的所有文件编译到 lib 目录下

./node_modules/.bin/babel src --out-dir lib

此时，项目结构如下：
在这里插入图片描述
到此，babel编译就结束了，可以看到相比较 src/index.js 的内容，lib/index.js 显然已经编译过了。

此时在浏览器中打开 index.html 是不是可以看到想要的内容 ‘hello world’ 了呢？

果然没有那么简单，页面内容没有加载出来，打开控制台发现报错了：Uncaught ReferenceError: require is not defined at index.js:3:16

为什么会报这个错呢？

因为 babel只是翻译解析工具，不会将所有依赖读取合并进来，如果想在最终的某一个js里，包含所有依赖的代码，那就需要用到打包工具也就是webpack等工具了

ok，fine. 我们继续配置 webpack。

打开webpack文档安装依赖

npm install webpack webpack-cli --save-dev

调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。
调整文件目录及内容
将 lib 目录更名为 dist;
将 index.html 移入 dist目录，并将其中js的引入路径改为 ‘main.js’
(因为webpack打包时，会将src中的内容最终打成一个 main.js 文件，存放到 dist 目录中)
执行打包命令 npx webpack --mode=development