将 monaco 编辑器集成到 ember octane
Integrate monaco editor into ember octane
我尝试将 monaco code 编辑器集成到我的 ember Octane 应用程序中。目前我正在使用 ESM 导入样式并确认手册,我安装了 webpack 加载程序插件并将其集成到我的 ember-cli-build.js
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, {
autoImport: {
webpack: {
plugins: [
new MonacoWebpackPlugin()
]
}
}
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
return app.toTree();
};
但是在构建我的应用程序时,我总是收到错误消息:
Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
和
(node:7993) UnhandledPromiseRejectionWarning: Error: webpack returned errors to ember-auto-import
任何人都可以帮助我并告诉我如何将 monaco 正确集成到我的 ember 应用程序中吗?
非常感谢!
我强烈建议使用 ember-monaco 而不是 monaco-editor,除非满足以下所有条件:您已经成功使用 Embroider,ember-monaco 缺少一个无法使用的关键功能添加到该包,您可以投入大量精力在 Ember 应用程序(周)中手动设置它。
为了在 Ember 应用程序中使用 Webpack 插件,您还需要安装和使用 Embroider。常规 ember-cli 构建根本不使用 Webpack,因此 Webpack 插件将无法工作。
如果您致力于直接使用 monaco-editor,您必须:
- 使用绣花
- 安装了 monaco-editor
- 已安装 Webpack 插件
monaco-editor-webpack-plugin
,
- 安装一个 polyfill (
@cardstack/requirejs-monaco-ember-polyfill
),然后按照自述文件注册
- 注册 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()],
},
},
// ...
我尝试将 monaco code 编辑器集成到我的 ember Octane 应用程序中。目前我正在使用 ESM 导入样式并确认手册,我安装了 webpack 加载程序插件并将其集成到我的 ember-cli-build.js
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, {
autoImport: {
webpack: {
plugins: [
new MonacoWebpackPlugin()
]
}
}
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
return app.toTree();
};
但是在构建我的应用程序时,我总是收到错误消息:
Module parse failed: Unexpected token (8:0) You may need an appropriate loader to handle this file type.
和
(node:7993) UnhandledPromiseRejectionWarning: Error: webpack returned errors to ember-auto-import
任何人都可以帮助我并告诉我如何将 monaco 正确集成到我的 ember 应用程序中吗? 非常感谢!
我强烈建议使用 ember-monaco 而不是 monaco-editor,除非满足以下所有条件:您已经成功使用 Embroider,ember-monaco 缺少一个无法使用的关键功能添加到该包,您可以投入大量精力在 Ember 应用程序(周)中手动设置它。
为了在 Ember 应用程序中使用 Webpack 插件,您还需要安装和使用 Embroider。常规 ember-cli 构建根本不使用 Webpack,因此 Webpack 插件将无法工作。
如果您致力于直接使用 monaco-editor,您必须:
- 使用绣花
- 安装了 monaco-editor
- 已安装 Webpack 插件
monaco-editor-webpack-plugin
, - 安装一个 polyfill (
@cardstack/requirejs-monaco-ember-polyfill
),然后按照自述文件注册 - 注册 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()],
},
},
// ...