将摩纳哥编辑器集成到余烬辛烷中

问题描述 投票:0回答:1

我尝试将monaco code编辑器集成到余烬辛烷应用程序中。目前,我正在使用ESM导入样式并确认使用手册,安装了webpack loader插件并将其集成到我的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();
};

但是在构建我的应用程序时,我总是收到错误消息:

模块解析失败:意外令牌(8:0)您可能需要适当的加载程序来处理此文件类型。

((node:7993)UnhandledPromiseRejectionWarning:错误:Webpack将错误返回到ember-auto-import的错误

有人可以帮助我,告诉我如何将monaco正确集成到余烬应用程序中吗?非常感谢!

webpack ember.js monaco-editor ember-octane
1个回答
0
投票

我强烈建议您使用ember-monaco代替monaco编辑器,除非满足以下所有条件:您已经成功使用了Embroider,ember-monaco缺少了无法添加到该软件包中的关键功能,因此您可以在Ember应用程序中手动设置它的重大工作(几周)。

为了在Ember应用程序中使用Webpack插件,您还需要安装并使用Embroider。常规的ember-cli构建完全不使用Webpack,因此Webpack插件将无法使用。

如果您are承诺直接使用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()],
        },
      },
// ...
© www.soinside.com 2019 - 2024. All rights reserved.