如何使用npm以最少的必需文件启动Angular2项目?

时间:2016-01-07 08:22:04

标签: javascript npm angular

我正在关注Angular2快速入门并使用Node包管理器安装所需的库:https://angular.io/guide/quickstart

创建了一个package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }

执行的

npm install

但是npm install命令下载了很多文件,例如“node_modules \ angular2”是32MB(可能是原始资源和其他东西包括在内),尽管如此 index.html只需要少数几个,例如angular2.dev.js只有1MB:

<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

我希望quickstart项目不占用这么多磁盘空间。 有没有办法告诉npm只下载“捆绑包”或最小化版本,还是有办法在生产包装时优化node_modules目录?

3 个答案:

答案 0 :(得分:10)

您可以使用这些文件的cdn版本并在开发中使用node_modules,并且根本不将它们包含在生产中:

<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

看看这个问题和答案中的评论: Angular 2 required libraries

这也是你可以逃脱的最小的package.json(取决于你的设置):

{ "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6" } }

我正在使用Webstorm启动自己的服务器并在检测到tsconfig.json文件时自行编译打字稿。

因此,如果您没有自己的服务器,则需要添加lite-server依赖项,配置和脚本,如果您没有ts编译器,则必须添加typescript依赖项和脚本以及:

"devDependencies": { "typescript": "^1.7.3" },

答案 1 :(得分:0)

您可以从package.json中删除不必要的依赖项。此外,在生产包装时,devDependencies部分中声明的依赖关系不会捆绑在一起。

答案 2 :(得分:0)

您可以使用ng new barebones-app --minimal