将 javascript 库与命名空间和 类 捆绑在不同的文件中

Bundle javascript library with namespace and classes in different files

我有不同的带有命名空间和 类 的文件,如下所示:

1) namespace.js:

var somenamespace = window.somenamespace || {};

2) class1.js:

somenamespace.class1= (function() {
  var _public = {};
  _public.someBoolean= false;
  return _public;
})();

3) class2.js:

somenamespace.class2= (function() {
  var _public = {};
  _public.init= function() {
  };
  return _public;
})();

我需要将它们打包并在库中公开。像这样:

expose default {
  somenamespace
};

以便在另一个项目中使用它。像这样:

import * as somenamespace from 'somenamespace';

var a = function() {
    somenamespace.class1.someBoolean = true;
    ansomenamespace.class2.init();
};

我该怎么做? (我还想公开其类型定义以供打字稿使用)谢谢!

您正在混合 import / export 样式模块和附加到 window 的类型。我建议选择其中之一。


例如将所有内容附加到 window:

namespace.js

var somenamespace = window.somenamespace || {}; // not strictly necessary

class1.js

var somenamespace = window.somenamespace || {};

somenamespace.class1= (function() {
  var _public = {};
  _public.someBoolean= false;
  return _public;
})();

class2.js

var somenamespace = window.somenamespace || {};

somenamespace.class2= (function() {
  var _public = {};
  _public.init= function() {
  };
  return _public;
})();

使用模块

// no import, just read it off of window

var a = function() {
    window.somenamespace.class1.someBoolean = true;
    window.ansomenamespace.class2.init();
};

或者,我推荐 import / export,尽管你需要使用 Babel 或 Webpack 或类似的东西转换你的代码,因为并非所有浏览器都支持 ES 模块:

namespace.js

export {class1} from './class1'
export {class2} from './class2'

class1.js

export const class1 = (function() {
  var _public = {};
  _public.someBoolean= false;
  return _public;
})();

class2.js

export const class2 = (function() {
  var _public = {};
  _public.init= function() {
  };
  return _public;
})();

使用模块

import * as somenamespace from './namespace'

var a = function() {
    somenamespace.class1.someBoolean = true;
    ansomenamespace.class2.init();
};