避免在转译的 javascript 中使用 require 语句答案

【问题标题】：Avoid require statement in the transpiled javascript避免在转译的 javascript 中使用 require 语句
【发布时间】：2017-02-09 16:08:19
【问题描述】：

.ts 文件中的以下语句：

import {jquery as $} from 'jquery';
import {socketio} from 'socket.io';

转译为：

var jquery_1 = require("jquery");
var socket_io_1 = require("socket.io");

现在浏览器将无法识别require。出路是什么？我的tsconfg.json 看起来像：

{
    "compilerOptions": {
        "target": "es5",
        "outDir": "./dist",
        "allowJs": true,
        "module": "commonjs",
        "noEmitOnError": false,
        "noImplicitAny": false,
        "strictNullChecks": true
    },
    "include": [
        "index.ts",
        "./lib/**/*",
        "./public/**/*"
    ]
}

有什么需要改变的吗？

【问题讨论】：

使用AMD modules。
一般你会使用 Webpack。
@loganfsmyth 你能帮我举个例子吗？我试过browserify，但它会抛出一个运行时错误，说它找不到某个模块。
浏览器不支持 CommonJS。您要么需要告诉 TS 生成浏览器支持的东西（不知道 TS，所以不确定选项是什么），或者使用模块捆绑器。如果 browserify 抛出错误，请研究如何修复该错误。

标签： javascript typescript ecmascript-6

【解决方案1】：

我使用browserify 将最终文件捆绑到与浏览器兼容的 javascript 中。

browserify input.js -o output.js

browserify 可能会抛出错误，例如 Error: Cannot find module 'bufferutil' from .. 在这种情况下，可以从 npm 安装相应的模块。

【讨论】：