我可以将 Browserify bundle/module 脚本与 <script src> 包含的脚本混合使用吗？

Question

我正在做一个后期采用 Browserify 的项目。

我们手动包含了许多 React 组件，以及它们的依赖项，作为 <script> 标记在需要它们的地方，包括一些包含常见 React 组件的文件。

<!-- includes ComponentA and dependencies, including React -->
<script src="/js/browserify-bundle.js"></script>

<script src="/js/react.min.js"></script> <!-- React included here too -->
<script src="/js/react-dom.min.js"></script>
<!-- ...more dependencies... -->
<script src="/js/common-components.js"></script> 
<!-- ...more components/script includes... -->

我正在处理第一个作为 ES6 模块编写的 React 组件，但由于我们的情况，模块依赖项最终被加载了两次；首先来自脚本标签中给出的手动依赖项，然后来自 Browserify 包。

删除包含 React 的脚本标签会破坏通用组件，但保留它会导致 React duplication errors like this，因为那里有两个 React。

这是否意味着无法通过（例如）告诉 Browserify 使用手动 React include 来暂时弥合这一差距？有了这个，我们就可以开始使用 Browserify 了。是否绝对有必要将我们所有的 components/scripts 制作成 ES6 模块并让所有东西都使用 Browserify 来避免这种情况？

Answer 1

也许您可以根据自己的情况使用 browserify-shim。它可以让你声明模块已在全局范围内可用。

在你的package.json中：

"browserify-shim": {
  "react": "global:React"
},
"browserify": {
  "transform": [ "browserify-shim" ]
}

希望这能让您暂时弥合差距。

我可以将 Browserify bundle/module 脚本与 <script src> 包含的脚本混合使用吗？

Can I mix a Browserify bundle/module scripts with <script src> included scripts?

javascript

browserify

ecmascript-6

es6-modules