javascript - 使用 SystemJS 将 ng2-ace 库集成到新创建的 angular-cli (angular2) 项目中

Question

我刚刚用最新的 angular-cli 创建了一个 angular2 项目工具。我现在想使用 ng2-ace 启动并运行 ace 编辑器图书馆。我想使用 SystemJS 作为模块加载器以一种干净的方法来完成它。

我做到了

npm install --save ng2-ace

然后我将以下两行添加到 angular-cli-builds.js 到 vendorNpmFiles 数组

'ng2-ace/index.js',
'brace/**/*.js

然后我将以下内容添加到 system-config.ts

 const map: any = {
   'ng2-ace': 'vendor/ng2-ace',
   'brace': 'vendor/brace'
 };

 /** User packages configuration. */
 const packages: any = {
   'brace': {
     format: 'cjs',
     defaultExtension: 'js',
     main: 'index.js'
   },
   'ng2-ace': {
     format: 'cjs',
     defaultExtension: 'js',
     main: 'index.js'
   }
 };

现在我尝试从组件导入指令

import { AceEditorDirective } from 'ng2-ace';

这会使编译器 ng serve 中止并出现以下错误:

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
Cannot find module 'ng2-ace'.

我尝试按照 angular-cli 的自述文件进行操作，并让谷歌 Material 设计库正常工作。但是，我不知道在尝试加载 ng2-ace 库时我做错了什么。

Answer 1

我认为这很难的原因是没有提供类型库。通过添加一些东西，我能够粗略地等效于此工作。我的版本具有非常静态的配置，但您可以对其进行增强。

系统配置需要这个:

const map:any = {
  'brace': 'vendor/brace',
  'w3c-blob': 'vendor/w3c-blob',
  'buffer': 'vendor/buffer-shims'
};

它可能还需要:

const packages:any = {
  'w3c-blob': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'index.js'
  },

  'brace': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'index.js'
  },

  'buffer': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'index.js'
  }
};

然后你还需要在angular-cli-build.js中添加这些东西作为npm依赖:

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      /* your stuff goes here, then add: */
      'brace/**/*.js',
      'w3c-blob/index.js',
      'buffer-shims/index.js'
 ]
});

就依赖关系而言，这几乎可以为您提供所需的一切。此时我添加了自己的指令。重要的部分在这里:

import { Directive, ElementRef, EventEmitter } from '@angular/core';

现在导入 brace 本身以及您将使用的任何模式和主题:

import 'brace';
declare let ace;

import 'vendor/brace/mode/javascript';
import 'vendor/brace/theme/monokai';

“declare let ace”让您可以访问大括号，即使没有输入也不是真正的 typescript 模块。

我将我的指令命名为“js-editor”，并将其附加到具有适当高度和宽度的标签。大括号的文档说也要对它的 div 应用“ block ”样式。然后声明指令:

@Directive({
  selector: '[js-editor]',
  inputs: ['text'],
  outputs: ['textChanged', 'editorRef']
})
export class JsEditor {

  editor : any;
  textChanged : EventEmitter<any>;
  editorRef : EventEmitter<any>;
  value : string;

  set text(value) {
    // if(value === this.oldVal) return;
    // this.editor.setValue(value);
    // this.editor.clearSelection();
    this.editor.focus();
  }

  constructor(elementRef : ElementRef) {
    this.textChanged = new EventEmitter();
    this.editorRef = new EventEmitter();

    const el = elementRef.nativeElement;
    el.classList.add('editor');

设置基本路径是支撑能够找到模式和主题的关键因素。这确实是设置它的错误位置 - 它应该在全局范围内完成，并且只有一次......但这只是一个实验，看看它是否有效，所以我在这里做了:

    ace.config.set('basePath', 'vendor/brace');

最后，创建编辑器:

    this.editor = ace.edit(el);

然后设置您的模式和主题。请注意，这些模式/主题看起来像路径，但实际上不是。 Ace(或者可能是 Brace)将使用这些字符串来使用上面的 basePath 生成路径:

    this.editor.getSession().setMode('ace/mode/javascript');
    this.editor.setTheme('ace/theme/monokai');

    setTimeout(() => {
      this.editorRef.next(this.editor);
    });

    this.editor.on('change', () => {
        /* do whatever you want here */
    });
  }
}

这是一般的想法。它确实需要按照 ng2-ace 的方式包装成一个很好的可配置指令，但我不是这样做的合适人选，我只是想让你朝着正确的方向前进。

--克里斯