Question

我正在使用TypeScript编写一个小型Web应用程序，并使用Browserify捆绑最终的JS。整个JS捆绑包需要30 kb而不会缩小。

现在我想使用Ramda库的一些函数。如果我通过npm安装Ramda并从我的应用程序代码中导入它，那么生成的捆绑包将增长到300 kb以上。

所以我将Ramda作为function reIndex($arr) { $arr = array_values($arr); foreach ($arr as $k => $v) { if (is_array($v)) { $arr[$k] = reIndex($v); } } return $arr; } $arr = reIndex($arr);的独立脚本加载：

index.html

现在从我的应用代码中我就做了：

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script>
<script src="bundle.js"></script> <!-- My small app -->

我的应用程序可以从R全局变量访问所有Ramda函数。但是，使用此方法有一个主要限制：R的类型为declare var R;，并且没有可用的类型检查。

所以我想做any以便进行所有类型检查，但不必执行npm install @types/ramda以避免在我的应用程序中捆绑Ramda代码。

我尝试了npm install ramda的许多组合，例如import，但我总是在某个阶段收到错误消息。

现在我总是可以在我的项目代码中复制Ramda的类型定义......但有没有更清洁的方式来做我想要的？ 简而言之，是否可以使用Ramda进行类型检查，而无需在我的应用程序中捆绑所有代码？如果是这样，怎么样？

Answer 1

似乎Browserify是一个非常简单的工具，对于小型项目来说很好，但是对于更复杂的需求，WebPack更好......所以我将构建脚本切换为使用WebPack。

WebPack具有一个特定功能，可以使用externals配置选项来处理此类问题。所以我只需要在webpack.config.js中添加它：

externals: {
    ramda: 'R'

}

WebPack的设置和配置非常复杂，因此我创建了一个WebPack模板项目并记录了其配置。如果您感兴趣，则为here。

Answer 2

您可以使用TypeScript导入语句拉入Ramda，例如：

// Entire library, and equivalent to `conts R = require('ramda');
import * as R from 'ramda';
// Usage
R.pipe(...);

// Specific methods only
import { pipe, filter, keys } from 'ramda';
// Usage
pipe(...);

只要你的npm依赖项中有ramda和@types/ramda，这就行了。通常@types/ramda应该在您的npm dev依赖项中，因为在您的源被转换后，它们不再被使用。此外，如果模块尚未提供打字，则不会将@types/moduleName导入到项目中，node_modules/@types会自动访问打字。

在TypeScript中使用Ramda而不在我的应用程序代码中捆绑

2 个答案: