Question

我有一个Web应用程序，可以将代码分解为lib /目录中的模块。每个模块都有一个静态/目录，从一个不同的域提供服务，以及一个jsx /目录，用于编译到static /目录中的React文件。示例源树可能如下所示：

.../
   -> lib/
         -> product1/
                    ... project 1 files ...
                    -> jsx/
                    -> static/
         -> product2/
                    ... project 2 files ...
                    -> jsx/
                    -> static/

我有一个监视这些目录的脚本，将jsx重新编译为静态目录，然后为每个主要模块创建一个包含browserify的包（上面，例如：product1.bundle.js，product2.bundle.js）

然而，使用这种结构，需要跨产品的模块不起作用。（IE，我想在一个单独的模块中创建自己的可重用ui组件）由于嵌套结构，Browserify无法在源代码树中找到它，如果我使用--ignore-missing，则不会通过浏览器化。

有更好的方法吗？

Answer 1

不是将JSX编译为JS作为单独的进程，而是使用browserify转换：reactify。

npm install --save-dev reactify

在你的package.json中：

"browserify": {
  "transform": ["reactify"]
}

您可以通过几种方式访问可重用的组件。最简单但最烦人且容易出错的就是require('../.././../foo.jsx')。

另一种方法是使其成为自己的包。然后，您可以将其符号链接到node_modules

ln -s ./src/js/common node_modules/

或者将它放在一个单独的git repo中，然后从那里安装npm。或者创建快照tar档案，然后npm安装（通过网络或相对路径）。

如何使用browserify与源树进行反应？

1 个答案: