Question

如何更新我的.ts源代码，类型定义和/或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');

require()和mode的{{1}}语句似乎是必要的，以便构建器（在我的情况下是webpack）知道引入此源代码。

如何更新我的theme源代码，类型定义和/或webpack配置，以确保构建中包含会话和模式代码？在我目前的设置中，他们不是，所以大括号发出了我想避免的网络请求。

Answer 1

TypeScript将删除所有在发出的代码中未使用其值的require（）语句。所以，一旦从TS编译到JS，你的require语句就不见了，webpack也不知道要包含那些。

要解决这个问题，你可以这样做：

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

但是TS在使用ES6时现在支持"bare imports"，所以你可以更干净地做到这一点：

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

那些将按原样发出。

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

1 个答案: