这是因为require()在浏览器/客户端 JavaScript 中不存在。

现在，您将不得不对客户端 JavaScript 脚本管理做出一些选择。

您有三个选择：

1. 使用<script>标签。
2. 使用CommonJS实现。它具有像 Node.js 这样的同步依赖项
3. 使用异步module定义(AMD) 实现。

CommonJS客户端实现包括（其中大多数在部署之前需要一个构建步骤）：

1. Browserify - 您可以在浏览器中使用大多数 Node.js module。这是我个人的最爱。
2. Webpack - 无所不能（捆绑 JavaScript 代码、CSS 等）。它因 React 的激增而变得流行，但因其艰难的学习曲线而臭名昭著。
3. Rollup - 一个新的竞争者。它利用 ES6 module并包括摇树功能（删除未使用的代码）。

您可以阅读更多关于我对Browserify 与 (deprecated) Component 的比较。

AMD实施包括：

1. RequireJS - 在客户端 JavaScript 开发人员中非常流行。由于其异步性质，这不是我的口味。

请注意，在您搜索选择要使用的那个时，您将阅读有关Bower 的信息。Bower 仅适用于包依赖项，并且对 CommonJS 和 AMD 等module定义没有意见。

我来自Electron环境，在那里我需要渲染器进程和主进程之间的IPC通信。渲染器进程位于脚本标记之间的 HTML 文件中，并生成相同的错误。

线

const {ipcRenderer} = require('electron')

抛出Uncaught ReferenceError: require is not defined

当浏览器窗口（嵌入此 HTML 文件的位置）最初是在主进程中创建时，我能够通过将 Node.js 集成指定为 true 来解决这个问题。

function createAddItemWindow() {

    // Create a new window
    addItemWindown = new BrowserWindow({
        width: 300,
        height: 200,
        title: 'Add Item',

        // The lines below solved the issue
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
})}

那为我解决了这个问题。此处提出了解决方案。

ES6：在 HTML 中，使用属性type="module"（浏览器支持）包含主要的 JavaScript 文件：

<script type="module" src="script.js"></script>

在script.js文件中，包含另一个文件，如下所示：

import { hello } from './module.js';
...
// alert(hello());

在包含的文件 ( module.js) 中，您必须导出您将导入的函数/类：

export function hello() {
    return "Hello World";
}

一个工作示例是here。更多信息在这里。

用require语句替换所有import语句。例子：

// Before:
const Web3 = require('web3');

// After:
import Web3 from 'web3';

它对我有用。

就我而言，我使用了另一种解决方案。

由于该项目不需要 CommonJS 并且它必须具有 ES3 兼容性（不支持module），因此您只需要从代码中删除所有导出和导入语句，因为您的tsconfig不包含

"module": "commonjs"

但是在引用的文件中使用 import 和 export 语句

import { Utils } from "./utils"
export interface Actions {}

最终生成的代码将始终具有（至少对于 TypeScript 3.0）这样的行

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();