GHCJS：如何使用打算与 npm 一起使用的 JS 库答案

【问题标题】：GHCJS: How to use a JS library that is intended to be used with npmGHCJS：如何使用打算与 npm 一起使用的 JS 库
【发布时间】：2018-03-02 01:51:10
【问题描述】：

我正在使用 ghcjs-0.2.0.9006030_ghc-7.10.3 和堆栈 lts-6.30 来构建前端应用程序。受this post 的启发，我决定使用react-flux 和material-ui。我在 index.html 中添加了 React 的 CDN 链接，并在使用 repl 时添加了 configured GHCJSi 以使用自定义的 index-dev.html。（React 的 CDN 链接也包含在 index-dev.html 中）

但是，对于material-ui-next，official installation method 是使用 NPM。他们不提供 CDN 链接。那么如何在 GHCJS 项目中使用这个库呢？我认为以下其中一项应该有效：

使用 jsDelivr 提供的CDN link。（虽然这个链接失效了）
想办法将material-ui-next 捆绑到cabal 中的js-sources 字段中，以便在构建时与我们的应用链接。

感谢任何帮助。

【问题讨论】：

标签： reactjs haskell npm material-design ghcjs

【解决方案1】：

在material-ui的package.json中，脚本build:umd:prod和build:umd:dev可以用来构建包的UMD包。所以你可以使用unpkg提供的CDN link。

即使material-ui 没有声明对react-transition-group 的对等依赖，它也希望react-transition-group/TransitionGroup 存在。所以我们必须在material-ui的链接之前添加以下代码

<script crossorigin="anonymous" src="https://unpkg.com/react-transition-group@2.2.1/dist/react-transition-group.js"></script>
<script>
    window["react-transition-group/TransitionGroup"] = ReactTransitionGroup.TransitionGroup;
</script>

我在material-ui 的 github 存储库上创建了一个问题，有关详细信息，请参阅that issue。

【讨论】：