One, Package.json explanation:
Package.json is used to declare the modules used in the project,
so that when the new environment is deployed, the new required modules can be installed as long as the Package.json file is in the same directory as the Npminstall.
{
"name": "Angular-phonecat", name is the required field
do not include NODE,JS in name
names will eventually be part of the URL, command line parameters, directory names cannot start with dot or underscore The
name may be called in the Require () method, so be as short as possible.
Private: True,private is set to TRUE,NPM to deny publishing, which prevents private repositories from being published accidentally.
"version": "0.0.0", and version is also a mandatory field.
"description": "A Tutorial Application for AngularJS", description is an optional field that will be used when NPM search.
"repository": "Https://github.com/angular/angular-phonecat", Repository is an optional field that indicates where the code is to be stored.
/* ("repository":
{"type": "Git"
, "url": "Http://github.com/npm/npm.git"
}
"repository":
{ "Type": "SVN"
, "url": "http://v8.googlecode.com/svn/trunk/"
}) */
"license": "MIT",/* optional field, If you are using a common license, such as Bsd-3-clause or MIT, use directly:
{"License": "Bsd-3-clause"}*/
"Devdependencies": {
Devdependencies is an optional field optional field. If you only need to download and use certain modules without downloading the test and documentation frameworks for those modules, it would be nice to put them under this.
The feeling is similar to dependencies, refers to the other package since the current package
Version of the format can make version exactly match, >,>=,<,<= this version, ~version close to this version, ^version compatible with this version, etc.
1.2.x x represents any number, so 1.2.1, 1.2.3, etc. can be
"Bower": "^1.7.7", Package Manager
"Http-server": "^0.9.0", lightweight Web server
"Jasmine-core": "^2.4.1",
"Karma": "^0.13.22" for running unit tests
"Karma-chrome-launcher": "^0.2.3",
"Karma-firefox-launcher": "^0.1.7",
"Karma-jasmine": "^0.3.8",
"Protractor": "^3.2.2" run end-to-end test
},
Scripts is an optional field and actually refers to npm-scripts.
NPM Run provides pre-and post-two hooks for each command.
"Scripts": {
Postinstall refers to the Postinstall task that is performed when the install task is completed
3 Last Run "Postinstall": "Bower Install",
Prestart refers to performing the start task before executing the Prestart task.
1 run "Prestart" first: "NPM install",
2 Run "Start" again: "Http-server./app-a localhost-p 8000-c-1",
"Pretest": "NPM Install",
"Test": "Karma start Karma.conf.js",
"Test-single-run": "Karma start Karma.conf.js--single-run",
"Preupdate-webdriver": "NPM Install",
"Update-webdriver": "Webdriver-manager Update",
"Preprotractor": "NPM run Update-webdriver",
"Protractor": "Protractor e2e-tests/protractor.conf.js",
"Update-index-async": "Node-e \" var fs=require (' FS '), indexfile= ' app/index-async.html ', loaderfile= ' App/bower_ Components/angular-loader/angular-loader.min.js ', Loadertext=fs.readfilesync (loaderfile, ' Utf-8 '). Split (/ sourcemappingurl=angular-loader.min.js.map/). Join (' sourcemappingurl=bower_components/angular-loader/ Angular-loader.min.js.map '), Indextext=fs.readfilesync (Indexfile, ' Utf-8 '). Split (/\\/\\/@@[email protected]@[\\s\ \s]*\\/\\/@@[email protected]@/). Join ('//@@n[email protected]@\\n ' +loadertext+ '//@@[email protected]@ '); Fs.writefilesync (indexfile,indextext); \ ""
}
}
As you can see from the above, the NPM install will run before NPM start runs, and then start runs "Http-server./app-a localhost-p 8000-c-1
Start a server. The last run is the Bower Install Bower managed package.
Second, Http-server Introduction:
Http-server is a simple 0 configuration command line HTTP server, based on node. js.
Use at the command line: $node http-server
The way defined in Package.json:
"Scripts": {
"Start": "Http-server-a 0.0.0.0-p 8000",
}
The parameters are:
-p port number (default 8080)
-A IP address (default 0.0.0.0)
-D Show directory list (default ' True ')
-I display AutoIndex (default ' True ')
-E or--ext if no default file name extension (default ' HTML ') is provided
-S or--silent suppress log information output
--cors Enable Cors
-O Open the browser after starting the service
-H or--help print List and exit
-C Sets the cache time (seconds) for the Cache-control Max-age header, disables caching, and the value is set to-1.
Three, bower Related: Stored inside bower_components
$ npm install-g Bower set up and initialize Bower
$ bower Install <package> put Bower Install packages is built in Bower_components,
A package can be a URL, a github shorthand, a git endpoint, and so on.
For example:
# Installs the project dependencies listed in Bower.json (this is a comment)
$ bower Install
# Registered package
$ Bower install jquery
# GitHub shorthand
$ bower Install desandro/masonry
# Git Endpoint
$ bower Install git:/ /github.com/user/package.git
# URL
$ bower Install Http://example.com/script.js
after save packages with $ bower Init create a bower.json,?$ bower install Pachage--save Save the newly created Bower.json
using use Packages,<script src= bower_components /jquery/dist/jquery.min.js "></SCRIPT>
Bower.json content:
{
"Name": "Angular-phonecat",
"description": "A starter Project for AngularJS",
"Version": "0.0.0",
"Homepage": "Https://github.com/angular/angular-phonecat",
"License": "MIT",
"Private": true,
"Dependencies": {
"Angular": "1.5.x",
"Angular-animate": "1.5.x",
"Angular-mocks": "1.5.x",
"Angular-resource": "1.5.x",
"Angular-route": "1.5.x",
"Bootstrap": "3.3.x",
"jquery": "2.2.x"
}
}
Parameter interpretation of Package.json and Bower