经过两天的痛苦和痛苦之后,我发现这是最好的方法。
const files = require.context('!!raw-loader!./node_modules/my-module-name/dist/src/', true, /\.d.ts$/);
files.keys().forEach((key: string) => {
// We add every .d.ts file to Monaco
Monaco.languages.typescript.typescriptDefaults.addExtraLib(
files(key).default,
'file:///node_modules/@adsk/fd-modeling-sdk/' + key.substr(2)
);
});
require.context
告诉 Webpack 捆绑该路径中与正则表达式匹配的所有文件。在这里我得到了所有.d.ts
包含我的模块的类型描述的文件。
!!raw-loader!
告诉加载文件而不尝试执行它。它会使浏览器崩溃。您需要为 Webpack 安装 raw-loader 模块。
然后,您可以在嵌入式 Monaco 实例中拥有这样的代码,并让输入智能感知像在 vs-code 中一样工作。
import {
function
} from '@my-module-name';
export default async function run(value: string) {
alert('Code ran. Value passed is ' + value);
};
返回应用程序代码,然后您可以从摩纳哥获取代码并评估代码。就我而言,当用户在反应应用程序中按下“运行”按钮时。
const model = editor.current.getModel();
if (model && sdk.current && editorType === 'text') {
// Be cool if Monaco worker could transpile the file to js. Don't work for some reason.
// Monaco.languages.typescript.getTypeScriptWorker()
// .then(function(worker) {
// worker(model.uri)
// .then(function(client) {
// client.getEmitOutput(model.uri.toString()).then((output: any) => {
// console.log(output);
// });
// });
// });
// @ts-ignore
const js = window.ts.transpile(model.getValue());
const setup = `const exports = { default: null };`;
const final = setup + ' ' + js;
try {
const runMethod = eval(final);
const newState = await runMethod('My value');
} catch (error) {
console.error(error);
alert(error);
}
}
理论上,您应该能够要求摩纳哥打字稿工作人员为您转译该文件,但我无法使其工作。
所以我加载了typescriptServices
现在在我的react index.html 文件中使用这一行。
<script src="https://unpkg.com/typescript@latest/lib/typescriptServices.js"></script>