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

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

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

操作步骤
1. 创建项目
```
mkdir demo
cd demo
1
2
```
此时 demo 目录下空空如也，什么也没有。
1. npm初始化
```
npm init
1
```
一路回车，此时 demo 下新增了一个 package.json 文件
1. 新增 src/index.js 和 index.html 文件，目录结构如下：
```
| - src
|  |- index.js
| - index.html
1
2
3
```
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');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```
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>

	
    <script src="./lib/index.js"></script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```
1. 参考babel使用文档安装所需依赖
```
npm install --save-dev @babel/core @babel/cli @babel/preset-env
1
```
1. 在项目的根目录下创建一个命名为 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"
      }
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
1. 运行如下命令，将 src下边的所有文件编译到 lib 目录下
```
./node_modules/.bin/babel src --out-dir lib
1
```
此时，项目结构如下：

到此，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。
1. 打开webpack文档安装依赖
```
npm install webpack webpack-cli --save-dev
1
```
1. 调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。
2. 调整文件目录及内容
  将 lib 目录更名为 dist;
  将 index.html 移入 dist目录，并将其中js的引入路径改为 ‘main.js’
  (因为webpack打包时，会将src中的内容最终打成一个 main.js 文件，存放到 dist 目录中)
3. 执行打包命令 npx webpack --mode=development
```
npx webpack --mode=development
1
```
最后目录结构如下：
1. 预览
  此时在浏览器中打开 dist/index.html 可以看到页面中出现了 ‘hello world’
相关阅读:
什么是Egg.js，它有什么特性，egg框架的安装，路由的定义，控制器Controller是什么，CORS配置，JSONP配置，get请求，post请求
 MySQL导入sql文件的三种方法
 javaScript
阿里云对象存储oss——对象储存原子性和强一致性
 单元测试到底是什么？应该怎么做？
美格智能，从5G智能模组到车规级C-V2X｜金球奖入围公示
 蓝桥杯算法基础（38）c++ STL
是真是假，AI可根据声音检测是否感染新冠准确率达89％
找工作八股文----《操作系统》
用户粘性︱如何提升用户忠诚度
原文地址：https://blog.csdn.net/RedaTao/article/details/124602098

需求描述

操作步骤

为什么会报这个错呢？