D3.js ES6模块和装饰器模式

我知道import语句向模块提供只读绑定，我想这取决于模块加载器，但是它是否打算使用ES6模块导入、修饰和重新导出

例如，当使用rollup.js时，这会失败

---

test.plugin.js

import * as d3 from 'd3'    
d3.ui = {test: 1};    
export default d3;

// Import d3 as a composition of props
import * as d3 from 'd3';
// Create a new object using the Object.assign operator
// You can use the spread operator too
const d3plus = Object.assign({ui: () => 'test'}, d3);
// Now d3plus will be extendable!
export default d3plus;

import * as d3 from 'd3'    
d3.ui = {test: 1};    
export default d3;

export default (d3) => {
  d3.ui = {test: 1};
  // Do not forget to return the new object
  return d3;
};

index.js

import * as d3 from 'd3'
import './src/test.plugin'

import * as d3 from 'd3'
import test from './src/test.plugin'

test(d3);

// What you are saying here is 
import * as mod from "moduleA.js"

// mod cannot be extended here
// mod.b can be extended though
mod.b.ui = {test: 1};

 import mod from "moduleA.js"

 // mod is effectively a prop of the module object, so it can be extended
 mod.d = { ... };

import d3plus from 'test.plugin.js';

console.log(d3plus.ui);

// Note that using this wrapper makes sure you have the extra stuff all the time
import d3plus from './src/test.plugin';

console.log(d3plus.ui);

import * as d3 from 'd3'
import pluginify from './src/test.plugin'

// Note that this change is local to this module only
const d3plus = pluginify(d3);
console.log(d3plus.ui);

汇总错误

Illegal reassignment to import 'd3'
src\test.plugin.js (6:0)
4:
5: import * as d3 from 'd3'
6: d3.ui = {test: 1};

---

这也是

test.plugin.js
export default (d3) => d3.ui = {test: 1};

index.js

import * as d3 from 'd3'
import './src/test.plugin'

import * as d3 from 'd3'
import test from './src/test.plugin'

test(d3);

// What you are saying here is 
import * as mod from "moduleA.js"

// mod cannot be extended here
// mod.b can be extended though
mod.b.ui = {test: 1};

 import mod from "moduleA.js"

 // mod is effectively a prop of the module object, so it can be extended
 mod.d = { ... };

import d3plus from 'test.plugin.js';

console.log(d3plus.ui);

// Note that using this wrapper makes sure you have the extra stuff all the time
import d3plus from './src/test.plugin';

console.log(d3plus.ui);

import * as d3 from 'd3'
import pluginify from './src/test.plugin'

// Note that this change is local to this module only
const d3plus = pluginify(d3);
console.log(d3plus.ui);

第一个失败是因为导入是不可变的，第二个失败是因为模块解析是静态的

是否可以将装饰器模式用于ES6模块？

更新 问题是模块对象不可扩展。可扩展的是模块对象中的对象

模块

A

let mod = { a, b, c };
// Once exported the "mod" object cannot be extended from the outside
export mod;

let mod = { a, b, c };
// Once exported as default
export default mod;

index.js

import * as d3 from 'd3'
import './src/test.plugin'

import * as d3 from 'd3'
import test from './src/test.plugin'

test(d3);

// What you are saying here is 
import * as mod from "moduleA.js"

// mod cannot be extended here
// mod.b can be extended though
mod.b.ui = {test: 1};

 import mod from "moduleA.js"

 // mod is effectively a prop of the module object, so it can be extended
 mod.d = { ... };

import d3plus from 'test.plugin.js';

console.log(d3plus.ui);

// Note that using this wrapper makes sure you have the extra stuff all the time
import d3plus from './src/test.plugin';

console.log(d3plus.ui);

import * as d3 from 'd3'
import pluginify from './src/test.plugin'

// Note that this change is local to this module only
const d3plus = pluginify(d3);
console.log(d3plus.ui);

默认导出 执行默认导出时，可以将其扩展为

default

实际上是一个嵌套属性

模块

A

let mod = { a, b, c };
// Once exported the "mod" object cannot be extended from the outside
export mod;

let mod = { a, b, c };
// Once exported as default
export default mod;

index.js

import * as d3 from 'd3'
import './src/test.plugin'

import * as d3 from 'd3'
import test from './src/test.plugin'

test(d3);

// What you are saying here is 
import * as mod from "moduleA.js"

// mod cannot be extended here
// mod.b can be extended though
mod.b.ui = {test: 1};

 import mod from "moduleA.js"

 // mod is effectively a prop of the module object, so it can be extended
 mod.d = { ... };

import d3plus from 'test.plugin.js';

console.log(d3plus.ui);

// Note that using this wrapper makes sure you have the extra stuff all the time
import d3plus from './src/test.plugin';

console.log(d3plus.ui);

import * as d3 from 'd3'
import pluginify from './src/test.plugin'

// Note that this change is local to this module only
const d3plus = pluginify(d3);
console.log(d3plus.ui);

在您的情况下，您可以执行以下操作：

test.plugin.js

import * as d3 from 'd3'    
d3.ui = {test: 1};    
export default d3;

// Import d3 as a composition of props
import * as d3 from 'd3';
// Create a new object using the Object.assign operator
// You can use the spread operator too
const d3plus = Object.assign({ui: () => 'test'}, d3);
// Now d3plus will be extendable!
export default d3plus;

import * as d3 from 'd3'    
d3.ui = {test: 1};    
export default d3;

export default (d3) => {
  d3.ui = {test: 1};
  // Do not forget to return the new object
  return d3;
};

index.js

import * as d3 from 'd3'
import './src/test.plugin'

import * as d3 from 'd3'
import test from './src/test.plugin'

test(d3);

// What you are saying here is 
import * as mod from "moduleA.js"

// mod cannot be extended here
// mod.b can be extended though
mod.b.ui = {test: 1};

 import mod from "moduleA.js"

 // mod is effectively a prop of the module object, so it can be extended
 mod.d = { ... };

import d3plus from 'test.plugin.js';

console.log(d3plus.ui);

// Note that using this wrapper makes sure you have the extra stuff all the time
import d3plus from './src/test.plugin';

console.log(d3plus.ui);

import * as d3 from 'd3'
import pluginify from './src/test.plugin'

// Note that this change is local to this module only
const d3plus = pluginify(d3);
console.log(d3plus.ui);

旧的错误答案 这是我的答案，当我在阅读规范时出错了。为了公平起见，也在前面阅读了es6模块

当您拥有模块

A

并希望用新功能/东西装饰它时，您有两种选择：

• 包装模块

  A

  ，然后仅在以后使用包装器
• 编写在需要时应用的装饰函数（如第二个示例）

在前一种情况下，您可以执行以下操作：

test.plugin.js

import * as d3 from 'd3'    
d3.ui = {test: 1};    
export default d3;

// Import d3 as a composition of props
import * as d3 from 'd3';
// Create a new object using the Object.assign operator
// You can use the spread operator too
const d3plus = Object.assign({ui: () => 'test'}, d3);
// Now d3plus will be extendable!
export default d3plus;

import * as d3 from 'd3'    
d3.ui = {test: 1};    
export default d3;

export default (d3) => {
  d3.ui = {test: 1};
  // Do not forget to return the new object
  return d3;
};

index.js

import * as d3 from 'd3'
import './src/test.plugin'

import * as d3 from 'd3'
import test from './src/test.plugin'

test(d3);

// What you are saying here is 
import * as mod from "moduleA.js"

// mod cannot be extended here
// mod.b can be extended though
mod.b.ui = {test: 1};

 import mod from "moduleA.js"

 // mod is effectively a prop of the module object, so it can be extended
 mod.d = { ... };

import d3plus from 'test.plugin.js';

console.log(d3plus.ui);

// Note that using this wrapper makes sure you have the extra stuff all the time
import d3plus from './src/test.plugin';

console.log(d3plus.ui);

import * as d3 from 'd3'
import pluginify from './src/test.plugin'

// Note that this change is local to this module only
const d3plus = pluginify(d3);
console.log(d3plus.ui);

使用第二种方法，您必须获得装饰器操作的结果：

test.plugin.js

import * as d3 from 'd3'    
d3.ui = {test: 1};    
export default d3;

// Import d3 as a composition of props
import * as d3 from 'd3';
// Create a new object using the Object.assign operator
// You can use the spread operator too
const d3plus = Object.assign({ui: () => 'test'}, d3);
// Now d3plus will be extendable!
export default d3plus;

import * as d3 from 'd3'    
d3.ui = {test: 1};    
export default d3;

export default (d3) => {
  d3.ui = {test: 1};
  // Do not forget to return the new object
  return d3;
};

index.js

import * as d3 from 'd3'
import './src/test.plugin'

import * as d3 from 'd3'
import test from './src/test.plugin'

test(d3);

// What you are saying here is 
import * as mod from "moduleA.js"

// mod cannot be extended here
// mod.b can be extended though
mod.b.ui = {test: 1};

 import mod from "moduleA.js"

 // mod is effectively a prop of the module object, so it can be extended
 mod.d = { ... };

import d3plus from 'test.plugin.js';

console.log(d3plus.ui);

// Note that using this wrapper makes sure you have the extra stuff all the time
import d3plus from './src/test.plugin';

console.log(d3plus.ui);

import * as d3 from 'd3'
import pluginify from './src/test.plugin'

// Note that this change is local to this module only
const d3plus = pluginify(d3);
console.log(d3plus.ui);

---

您可以使用更多的技巧来获得相同的结果，但我建议您明确说明您正在应用于模块的充实过程。

有趣。。。谢谢你的回复。事实上，当我尝试第一个选项时，我得到了与之前相同的错误，chrome抛出了第二个选项，表示对象不可扩展

无法添加属性ui，对象不可扩展
。我的想法和你的一样，是我的错。我弄错了。我认为这个问题取决于出口产品的装订类型。我会更新答案。