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

需求描述

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

操作步骤

  1. 创建项目
mkdir demo
cd demo

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

  1. npm初始化
npm init

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

  1. 新增 src/index.jsindex.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>Documenttitle>
head>
<body>
    <div id="app">div>

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

body>
html>
  1. 参考babel使用文档 安装所需依赖
npm install --save-dev @babel/core @babel/cli @babel/preset-env
  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. 运行如下命令,将 src下边的所有文件 编译到 lib 目录下
./node_modules/.bin/babel src --out-dir lib

此时,项目结构如下:
纯html项目配置babel,报错Uncaught ReferenceError: require is not defined_第1张图片
到此,babel编译就结束了,可以看到相比较 src/index.js 的内容 ,lib/index.js 显然已经编译过了。
在这里插入图片描述
此时在浏览器中打开 index.html 是不是可以看到想要的内容 ‘hello world’ 了呢?
纯html项目配置babel,报错Uncaught ReferenceError: require is not defined_第2张图片
果然没有那么简单,页面内容没有加载出来,打开控制台发现报错了: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. 调整 package.json 文件,以便确保我们安装包是私有的(private),并且移除 main 入口。这可以防止意外发布你的代码。
    纯html项目配置babel,报错Uncaught ReferenceError: require is not defined_第3张图片
  2. 调整文件目录及内容
    lib 目录更名为 dist;
    index.html 移入 dist目录,并将其中js的引入路径改为 ‘main.js’
    (因为webpack打包时,会将src中的内容最终打成一个 main.js 文件,存放到 dist 目录中)
    纯html项目配置babel,报错Uncaught ReferenceError: require is not defined_第4张图片
  3. 执行打包命令 npx webpack --mode=development
npx webpack --mode=development

最后目录结构如下:
纯html项目配置babel,报错Uncaught ReferenceError: require is not defined_第5张图片

  1. 预览
    此时在浏览器中打开 dist/index.html 可以看到页面中出现了 ‘hello world’
    纯html项目配置babel,报错Uncaught ReferenceError: require is not defined_第6张图片

你可能感兴趣的:(前端,html,前端,javascript)