添加第三方库?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (52)

我正试着开始使用角度2 cli。

我想在我的项目中使用动量,下面是我所做的:

  1. 使用角CLI创建项目。
  2. 运行npm install --save moment
  3. 从src文件夹运行typings init+typings install --save moment
  4. 增加系统模块的力矩:
System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    moment: {
      map: 'node_modules/moment/moment.js',
      type: 'cjs',
      defaultExtension: 'js'
    }
  }
});

下面是我的tsconfig.json文件:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "",
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "rootDir": ".",
    "sourceMap": true,
    "sourceRoot": "/",
    "target": "es5"
  },
  "files": [
    "typings/main.d.ts"
  ],
  "exclude": [
    "typings/browser.d.ts",
    "typings/browser"
  ]
}

我做错什么了?我在文档中找不到添加第三方库的指南。

提问于
用户回答回答于

当包含第三方库时,有两部分想要执行的javascript代码和定义文件给IDE所有强类型的优点。

显然,如果应用程序要起作用,第一个程序必须是存在的。<script src="thirdLib.js">标记在html页面中,该页面承载着角2应用程序。这不会带来定义,因此将没有IDE的优点,但是应用程序将发挥作用。(要阻止IDE抱怨它不知道变量‘ThidLib’),请添加declare var thirdLib:any,因为它是类型的。anyIDE不会为第三个Lib提供代码完成,但它也不会抛出IDE错误。)

获得执行代码和定义,如果库是用类型记录编写的,则可以从代码中添加对ts文件的引用。import {thirdLib} from 'thirdLibfolder/thirdLib'库的ts文件本质上具有执行代码和类型记录定义。

如果库不是用类型记录编写的,但是一些好的灵魂为它编写了一个第三层Lib.d.ts定义文件,那么您可以用/// <reference path="thirdLibfolder/thirdLib.d.ts" />在ts文件中,然后仍然包括实际执行的javascript和上面提到的脚本引用。

这些文件的位置,以及在引用中是否包括扩展名,都是特定于你的项目设置以及正在使用的绑定器和构建工具。node_modules中引用的库的文件夹。import {...,并将接受以下引用:.ts扩展和没有.meteor将抛出一个错误,如果包括.ts延伸。

用户回答回答于

首先,我们需要从NPM安装ChartJS。

npm install chart.js --save

现在我们已经安装了ChartJS,我们需要告诉角-cli-build.js文件中的CLI,新的JavaScript文件位于哪里,这样就可以打包了。

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'chart.js/Chart.min.js',
    ]
  });
};


const map: any = {
  'chartjs': 'vendor/chart.js/'
};


const packages: any = {
  chartjs: { defaultExtension: 'js', main: 'Chart.min.js' }
};

扫码关注云+社区

领取腾讯云代金券