UMD支持???

之前在实现某个组件时需要导入依赖的包,一直都是用  import,但是偶尔也会碰到require这样的方式。对于其之间的区别没有搞懂过。今天在学习CKEditor5的时候,正好接触到了这一块,赶紧记下来。

比如我的组件的需要用到CKEditor5,终端输入命令    npm install --save @ckeditor/ckeditor5-build-classic

这样成功把这款富文本编辑器的经典版导入到了 node_modules里面,接下来就是在组件中进行引用:

在CKEditor的官网上很贴心的展示了根据当前不同的环境引入的方法——

由于构建作为UMD模块分发,因此可以通过各种方式检索编辑器类:

  • 通过CommonJS兼容的加载器(例如webpackBrowserify),
  • 通过RequireJS(或任何其他AMD库),
  • 如果上述加载器都不可用,则从全局命名空间中获取。

对应的代码如下:

// In the CommonJS environment.
const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );
ClassicEditor.create( ... ); // [Function]

// If AMD is present, you can do this.
require( [ 'path/to/ckeditor5-build-classic/build/ckeditor' ], ClassicEditor => {
    ClassicEditor.create( ... ); // [Function]
} );

// As a global variable.
ClassicEditor.create( ... ); // [Function]

// As an ES6 module (if using webpack or Rollup).
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
ClassicEditor.create( ... ); // [Function]

上面展示了在不同的环境下如何来引入,对于其他包的引入也类似。 

接下来开始踩CKEditor5的坑。

猜你喜欢

转载自blog.csdn.net/taylorzun/article/details/81305098