我强烈推荐使用Ember-摩纳哥 https://github.com/mike-north/ember-monaco而不是 monaco-editor,除非满足以下条件:您已经成功使用 Embroidery,ember-monaco 缺少一个无法添加到该软件包中的关键功能,并且您可以花费大量精力手动设置它Ember 应用程序(几周)。
为了在 Ember 应用程序中使用 Webpack 插件,您还需要安装和使用绣 https://github.com/embroider-build/embroider。常规 ember-cli 构建根本不使用 Webpack,因此 Webpack 插件将无法工作。
If you are致力于直接使用 monaco-editor,您必须:
- 使用绣花
- 安装了摩纳哥编辑器
- 有Webpack插件
monaco-editor-webpack-plugin
安装,
- 安装一个polyfill(
@cardstack/requirejs-monaco-ember-polyfill
),然后按照readme进行注册
- 注册webpack插件并导入css文件
这是一个示例 ember-cli-build.js 文件:
'use strict';
process.env.BROCCOLI_ENABLED_MEMOIZE = 'true';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
prember: {
// we're not pre-rendering any URLs yet, but we still need prember because
// our deployment infrastructure already expects `_empty.html` to exist
// for handling unknown URLs.
urls: [],
},
});
app.import('node_modules/monaco-editor/dev/vs/editor/editor.main.css');
return (function() {
const Webpack = require('@embroider/webpack').Webpack;
const { join } = require('path');
const { writeFileSync } = require('fs');
return require('@embroider/compat').compatBuild(app, Webpack, {
staticAddonTestSupportTrees: true,
staticAddonTrees: true,
staticHelpers: true,
staticComponents: true,
onOutputPath(outputPath) {
writeFileSync(join(__dirname, '.embroider-app-path'), outputPath, 'utf8');
},
packagerOptions: {
webpackConfig: {
plugins: [new MonacoWebpackPlugin()],
},
},
// ...