Angular2 2.4 如何将 Underscore 等外部库加载到 angular2 中。

Question

我使用 angular-cli 创建了一个应用程序，我需要导入外部库，例如 underscore。我是 angular 2.4 的新手，之前没有使用过 SystemJS 和 Webpack。有人可以给我一步一步的指导，说明如何将下划线加载到我的 angular 2.4 项目中。

link 到 github 以及使用 angular-cli "latest version" 创建的带有下划线的项目会让我非常高兴。阅读代码很好 ;)

---- 以下只是描述让我感到困惑的地方 ------

根据我的研究，我发现了 2 种加载模块的替代方法。

SystemJS - 大多数记录在 angular.io
Webpack - angular-cli 使用的是什么。

哪个最好用？

//package.json "name": "angular", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "protractor" }

cli 在脚本标记中创建对 "ng serve" 的引用。我应该删除该行并将其替换为 webpack 吗？

... 如果是的话。我是否必须设置所有已完成的设置 angular 加上我的设置，还是将我的设置添加到顶部更简单？

Answer 1

刚刚运行npm install --save underscore @types/underscore

Answer 2

使用以下命令：对于 Angular CLI

npm install underscore --save // save to dependencies: required to run
npm install @types/underscore --save-dev // save to dev dependencies: required in dev mode

在组件中：

import * as _ from 'underscore';

let rs = _.map([1, 2, 3], function(num){ return num * 3; });
console.log(rs);

Answer 3

要使用下划线，您需要导入类型，以便 typescript 编译器知道它。

npm install --save underscore @types/underscore

其次，从下划线 1.6 开始：

Underscore now registers itself for AMD (Require.js), Bower and Component, as well as being a CommonJS module and a regular (Java)Script. An ugliness, but perhaps a necessary one.

因此您需要使用与 AMD 或 CommonJS 兼容的模块加载器。 SystemJS 几乎可以加载任何格式，因此您可以在 tsconfig 文件中使用 SystemJS 和目标 "commonjs"。

确保在 systemjs.config.js 中包含地图（不包含 index.html 中的脚本）：

map: {  'underscore': 'npm:underscore/underscore.js' }

Angular2 2.4 如何将 Underscore 等外部库加载到 angular2 中。

Angular2 2.4 How to load external libraries sush as Underscore into angular2.

angular

webpack

external

systemjs