我可以将Browserify bundle/模块脚本与脚本src>包括脚本

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

本文关键字:脚本 src 包括 我可以 Browserify bundle 模块      更新时间:2023-09-26

我正在做一个后期采用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... -->

我正在编写第一个React组件作为ES6模块,但由于我们的情况,模块依赖最终被加载两次;首先从script标签中给出的手动依赖项中获取,然后从Browserify包中获取。

删除包含React的script标签会破坏公共组件,但保留它会导致像这样的React重复错误,因为有两个React浮动在那里。

这是否意味着没有办法通过(例如)告诉Browserify使用手动React include来暂时弥合这个差距?这样,我们就可以开始使用Browserify了。是否绝对有必要把我们所有的组件/脚本都变成ES6模块,并让所有的东西都使用Browserify来避免这种情况?

也许您可以根据您的情况使用browserify-shim。它允许你声明一个模块已经在全局作用域中可用。

在你的package.json:

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

希望这能让你暂时弥合差距