Интегрировать редактор Монако в октябрь - PullRequest
Новая
       21

Интегрировать редактор Монако в октябрь

1 голос
/ 07 февраля 2020

Я пытаюсь интегрировать редактор 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();
};

Но при сборке приложения Я всегда получаю сообщения об ошибках:

Ошибка синтаксического анализа модуля: неожиданный токен (8: 0) Вам может потребоваться соответствующий загрузчик для обработки этого типа файла.

И

(узел: 7993) UnhandledPromiseRejectionWarning: Ошибка: webpack возвратил ошибки в ember-auto-import

Может кто-нибудь помочь мне и подсказать, как правильно интегрировать monaco в мой ember применение? Большое спасибо!

1 Ответ

1 голос
/ 12 февраля 2020

Я настоятельно рекомендую использовать ember-monaco вместо monaco-editor, если только не все верно: вы уже успешно используете Embroider, в ember-monaco отсутствует ключевая функция, которую невозможно добавить в этот пакет, и вы можете посвятить значительные усилия его настройке вручную в приложении Ember (недели).

Чтобы использовать плагины Webpack в приложении Ember, вам также необходимо установить и использовать вышивают . Обычные сборки ember-cli вообще не используют Webpack, поэтому плагин Webpack не будет работать.

Если вы привержены прямому использованию monaco-editor, вы должны:

  • используйте Embroider
  • с установленным монако-редактором
  • с установленным плагином Webpack monaco-editor-webpack-plugin,
  • установите полифилл (@cardstack/requirejs-monaco-ember-polyfill) и выполните файл readme для регистрации
  • , зарегистрируйте плагин webpack и импортируйте файлы css

Вот пример файла ember-cli-build. js file: 

'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()],
        },
      },
// ...
...