时间戳

首页 > 解决方案 > 将 javascript 库与不同文件中的命名空间和类捆绑在一起

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

问题描述

我有不同的文件，它们的命名空间和类是这样的：

1）命名空间.js：

var somenamespace = window.somenamespace || {};

2）类1.js：

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

3）类2.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();
};

我该怎么做？（我还想公开其类型定义以供打字稿使用）谢谢！

标签： javascripttypescriptbundlejavascript-namespaces

解决方案

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

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

命名空间.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 模块：

命名空间.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();
};

推荐阅读