如何编译导入补充 Javascript 源的 TypeScript 模块？

Question

如何更新我的 .ts 源代码、类型定义、and/or webpack 配置以确保构建中包含补充大括号编辑器代码？

我正在使用 TypeScript 构建浏览器应用程序并使用 webpack 来构建它。我想使用没有现有类型定义文件的 brace editor 组件。我有以下准系统类型文件：

declare module brace {
    export interface ISession {
        setMode(mode:string);
    }

    export interface IEditor {
        getSession():ISession;
        setTheme(theme:string);
    }
}
export function edit(selector:string):brace.IEditor

这允许我使用以下源代码编译应用程序：

import * as Brace from 'brace';
...
editor = Brace.edit(someElement);
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');

大括号模块文档建议使用以下 Javascript 创建编辑器：

var ace = require('brace');
require('brace/mode/javascript');
require('brace/theme/monokai');

var editor = ace.edit(someElement);
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');

mode 和 theme 的 require() 语句似乎是必要的，以便构建器（在我的例子中是 webpack）知道引入此源代码。

如何更新我的 .ts 源代码、类型定义、and/or webpack 配置以确保构建中包含会话和模式代码？在我当前的设置中，它们不是，所以 brace 发出我想避免的网络请求。

Answer 1

TypeScript 将删除任何其值未在发出的代码中使用的 require() 语句。因此，一旦从 TS 编译为 JS，您的 require 语句就消失了，webpack 不知道将它们包含在 bundle 中。

要解决此问题，您可以这样做：

var braceDependencies = [
    require('brace/mode/javascript'),
    require('brace/theme/monokai')
];

但 TS 现在在使用 ES6 时支持 "bare imports"，因此您可以更干净地执行此操作：

import 'brace/mode/javascript';
import 'brace/theme/monokai';

那些将按原样发射。

如何编译导入补充 Javascript 源的 TypeScript 模块？

How can compile a TypeScript module that imports supplementary Javascript source?

ace-editor

typescript

webpack