Question

我正在使用webpack单独捆绑几个库。我想在TypeScript中使用名称空间来组织浏览器中窗口对象上的代码。例如：

account.form.ts

export namespace Account.Form {
  export function onLoad() {
    // my code
  }
}

account.ribbon.ts

export namespace Account.Ribbon {
  export function onLoad() {
    // my code that is different but with the same function name
  }
}

这些文件可以同时加载到给定的页面上，但是使用webpack将对象分配给window对象的方式，第一个加载将覆盖第二个。例如，如果在“ account.form.ts”之后执行“ account.ribbon.ts”，则仅“ account.ribbon.ts”中定义的模块将可用，因为“ account.form.ts”将被覆盖。

两个捆绑包中都包含以下代码：

(function(e, a) { for(var i in a) e[i] = a[i]; }(window, /******/ (function(modules) { // webpackBootstrap
//...

我想看到的是以下内容，使用Object.assign而不是覆盖窗口对象上的引用。

(function(e, a) { for(var i in a) Object.assign(e[i] = e[i] || {}, a[i]); }(window, /******/ (function(modules) { // webpackBootstrap

有没有办法用webpack做到这一点？下面是webpack.config.js中的输出配置。

//...
output: {
  filename: "[name].js",
  path: path.resolve(`../web-resources/${distRelativeDir}`),
  libraryTarget: "window"
},
//...

Answer 1

可能是您的目标是es6。否则，Object.assign将无法正常运行，因为早期版本不支持该功能（因此在IE，Android Webview ...中将无法运行。）

您可以引用它here

Webpack在输出libraryTarget中使用Object.assign

1 个答案: