browserify 和 babel 命名空间错误 React答案

【问题标题】：browserify and babel namespace error Reactbrowserify 和 babel 命名空间错误 React
【发布时间】：2016-04-13 06:41:19
【问题描述】：

browserify 新手：我有一个普通的 js 文件，其中一些反应组件分组在一个命名空间中，例如：

var myNameSpace= {
'reactFunc1': React....,
'reactFunc2': React....,
'reactFunc3': React....,
'nonreactFunc1' function(..)
}

在我尝试使用的其他一些 js 文件中：

myNameSpace.reactFunc1(...);

当我使用 babel 将 jsx 转换为 js 时，这工作正常。

但是当我使用命令 browserify -t [ babelify --presets [ react ] ] some.js someOther.js 浏览文件时

myNameSpace not defined

我在这里做错了什么。有没有什么方法可以让这项工作无需太多麻烦/代码更改？

【问题讨论】：

您是否在不同的模块上使用命名空间？你是如何导入命名空间的？
@Tzach 我没有导入它。而且这里没有模块..我有 2 个单独的 js 文件...当我不浏览文件时...myNameSpace.reactFunc1 已定义但当我浏览器时 myNameSpace.reactFunc2 未定义
我不知道如何将这个var myNameSpace= { 'reactFunc1': React...., 'reactFunc2': React...., 'reactFunc3': React...., 'nonreactFunc1' function(..) } 设为模块并以名称myNameSpace 导出它并在其他js 文件中使用它并执行myNameSpace.reactFunc1(...); 之类的操作
知道了。这是因为当使用 browserify 时，每个文件都是一个模块，而 var 定义是该模块的本地文件。您需要将一个模块导入另一个模块，或者执行window.myNameSpace = ...

【解决方案1】：

这里有两个选择，使用模块或使用全局命名空间。

使用模块时，您需要从第一个模块导出命名空间，并在另一个模块中导出require：

module.exports = {
    'reactFunc1': React....,
}

然后在另一个文件中

var myNameSpace = require('first_module');

另一个选项（不太推荐）是使用全局 window 对象：

window.myNameSpace = {
    'reactFunc1': React....,
}

然后在另一个文件中：

window.myNameSpace.reactFunc1()

【讨论】：