将自定义 Javascript 对象导入 React/ES6 生态系统答案

【问题标题】：Import Custom Javascript Objects Into React/ES6 Ecosystem将自定义 Javascript 对象导入 React/ES6 生态系统
【发布时间】：2016-05-21 13:29:11
【问题描述】：

我在以前项目的文件中有一些旧的自定义 javascript 对象，我想在使用 React 0.14.x 和 ES6 约定构建的新项目中导入和使用这些对象。有太多的旧代码，我不想触及其中的任何一个。它看起来像下面这样：

myCustomObjectOne.js：

function myCustomObjectOne() {
    this.some_attribute = '';
    this.another_attribute = [];
    etc.
}

myCustomObjectOne.prototype.someMethod = function() {
    // do stuff
};

有一些类似模式的文件定义了其他自定义对象。

我是否可以将这些文件放在某个地方，然后在我的一个 React 组件文件中执行以下操作：

import myCustomObjectOne from '/path/to/file/myCustomObjectOne.js'
import myCustomObjectTwo from '/path/to/file/myCustomObjectTwo.js'

另外，假设在我的旧项目中，我使用了paperjs 或任何第三方库。我指的是myCustomObjectOne.js 中该库中的全局对象，例如，进行paper.activate() 之类的调用。但是，在我的新项目中，我只有一个包清单，其中包含 paperjs 作为依赖项，它与 webpack 捆绑在一起，并且在我拥有的 React 组件中：import paper from 'paper';。我的旧文件不再能够访问全局 paper 对象，因为之前我只是将供应商文件包含在 <script> 标记中。

我是不是把事情弄得太复杂了？我是否应该尝试导入/捆绑我的旧文件，而应该在我的 html 文件中添加 <script> 标签并将旧文件与我的 React 代码完全分离？我的旧 JS 对象不是视图，也不是真正与 DOM 交互，它们几乎只是操纵第三方库（而第三方库又是自包含在一个画布元素中）。

【问题讨论】：

标签： import reactjs ecmascript-6 webpack paperjs

【解决方案1】：

如果你使用 webpack，这可以使用 imports-loader 和 Provide Plugin。欲了解更多信息，read this page。

【讨论】：

我从 npm 安装了 imports-loader。然后在我的 webpack 配置中，在加载器部分我添加了imports?paper=paper。现在在我的 React 组件中，我不需要明确地执行 import paper from 'paper';。然后我添加了我的自定义文件：import myCustomObjectOne from '/path/to/file/myCustomObjectOne.js'; 如何在 React 组件的自定义模块中引用我的构造函数？尝试let blah = new myCustomObjectOne(); 时出现“不是函数”错误
没关系，您只需要在自定义文件中使用export 语句即可。
看来问题已解决。如果是，请接受答案。谢谢。