简体   繁体   English

angular 2 package.json文件的解释

[英]Explanation for angular 2 package.json file

I'm not willing to use typescript compiler provided in angular 2 quick start guide and will use gulp.js instead. 我不愿意使用angular 2快速入门指南中提供的typescript编译器,而是使用gulp.js代替。 However there are few questions I have about package.json file provided on angular website: 但是我对angular网站上提供的package.json文件的问题很少:

{
  "name": "angular-starter",
  "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"
  }
}

I'm sure that few things like tsc, tsc:w script comands alongside typescript devDependency can be safely removed, but am not sure about purpose for things like concurently dependency as well as dependency section in general, could you guys provide more info on all dependencies that follow angular2? 我敢肯定,像一些事情tsc, tsc:w脚本命令对应的旁边打字稿devDependency可以安全删除,但我不知道目的的东西像concurently的依赖,以及dependency于常规部分,可能你们提供所有的详细信息angular2之后的依赖关系? I tried looking these up in quickstart guide along apendixes, but had no luck as they are very short. 我尝试在快速启动指南中查找这些内容,但是没有运气,因为它们很短。

concurently is and npm package which allows to run multiple CLI commands in one shot, see line below in package.json. concurently是和NPM包,其允许运行多个CLI一次性命令,见线以下的package.json。 concurrent command is coming from concurrenlty. concurrent命令来自concurrenlty。 You can remove that safely. 你可以安全地删除它。

"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "

dependency section in package.json file lets you keep track of project dependencies. package.json文件中的dependency部分允许您跟踪项目依赖性。 Using reference of these packages in dependency section allows you to use module bundler like webpack, browserify etc. It also keeps your project linked to specific versions of each of these packages if new version introduce any breaking changes etc. Having this section in package.json file lets you remove packages directory (node_modules) to be under source control. 在依赖部分中使用这些包的引用允许您使用webpack,browserify等模块捆绑器。如果新版本引入任何重大更改,它还会将您的项目链接到每个包的特定版本。在package.json中包含此部分file允许您删除要在源代码管理下的包目录(node_modules)。 Installing these packages again on lets say another machine requires only package.json and dependency section in it. 再次安装这些软件包让我们说另一台机器只需要package.json和dependency部分。

For each package in dependency section search npmjs website for more details. 对于依赖性部分中的每个包,请搜索npmjs网站以获取更多详细信息。

Well adding some points with @nexus23's answer. 用@ nexus23的答案添加一些要点。 my answer is not completed i know but for comment it is too long so posting as answer hope this will help somene. 我的回答没有完成我知道,但是评论它太长了所以发布答案希望这将有助于somene。

Package.json is the important file for the project where you import our dependencies list which you used in your project. Package.json是项目的重要文件,您可以在其中导入项目中使用的依赖项列表。 Basically there are three types of dependencies 基本上有三种类型的依赖项

  • Dependency 依赖
  • DevDependency DevDependency
  • peerDependency for more documentation refer here in the answers. peerDependency以获取更多文档,请参阅答案。

now come to the point ie answer to this question. 现在来到这一点即回答这个问题。 there are few dependencies which we have to include for make our angular2 project run.which is listed below. 我们必须包含的几个依赖项才能使我们的angular2项目运行。下面列出了它们。

  1. angular2 -- is the basic file for the angular2 project. angular2 - 是angular2项目的基本文件。 which is most important file for our project. 这是我们项目最重要的文件。 (stable latest version is angular2 beta) (稳定的最新版本是angular2 beta)

  2. systemjs -- is the Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. systemjs - 是通用动态模块加载器 - 在浏览器和NodeJS中加载ES6模块,AMD,CommonJS和全局脚本。 Works with both Traceur and Babel. 适用于Traceur和Babel。 we use systemjs Config for setup the baseUrl , to Import main file etc in our main file ie index.html like following: 我们使用systemjs配置获取设置baseUrlto Import main file等,在我们的主文件即index.html的喜欢以下内容:

    <script> System.config({ baseURL: '<%= APP_BASE %>', paths: {'*': '*.js?v=<%= VERSION %>'}, defaultJSExtensions: true }); </script>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM