My React Native Skill Tree Lighting Program のjavascript module Manager npm

@author ASCE1885 's Github Weibo CSDN
This article due to the potential commercial purposes, not open the full text reprint license, thank you!

NPM, which is the name of node Package Manager, is the first to exist as node's bundle manager. However, after continuous development and growth, now NPM is no longer limited to Node's category, has become a Javascript package manager, see the following NPM official homepage introduction to know:

This series of tutorials assumes that you have installed the relevant environment (especially node. js) in accordance with the React Native official Getting Started guide, and executed the react-native init AwesomeProject command to generate the Demo project Awesomeproject, as shown in the project directory structure:

File structure of the Package.json

As you can see, the root directory of the Awesomeproject project has a package.json file named, which is the project's metadata set, and the main functions are:

• Managing the third-party packages that are dependent on the project makes it easy to share the dependency configuration of the project with other developers on the team, so that everyone does not need to be manually npm install dependent on the package
• Define scripts that can be executed in NPM

A qualified package.json file needs to contain at name least version two fields, and the two-tuple of the two fields can uniquely identify a package, as follows:

{  "name"AwesomeProject",  "version"0.0.1"}

Of course, the Package.json of the project is unlikely to be so simple, the usual fields and explanations shown in the following table, developers need to choose according to the specific business needs:

Field name	meaning	Example
Name	The package name needs to be unique, and the letters must all be lowercase, and if a package lacks this field, using NPM install will fail	"Name": "Redux"
Version	The version number of the package, followed by the semantic version (http://semver.org/lang/zh-CN/) format, that is, the version number contains three bits: MAJOR.MINOR.PATCH . MAJORindicates a large change in the version, such as an API incompatible with an older version, an indication that the MINOR version adds new functionality, but is compatible with an older version; PATCH some bug fixes that are compatible with older versions	"Version": "3.5.2"
Description	Description of the project, keep it as concise as possible	"description": "Predictable state container for JavaScript apps"
Author	The author name and e-mail address of the item, if there are multiple, represented as a JSON array	"Authors": ["Dan Abramov (Https://github.com/gaearon)", "Andrew Clark [email protected](https://github.com/ Acdlite) "]
Contributors	A list of contributors to the project, expressed as a JSON array	"Contributors": [{"Name": "asce1885", "email": "[email protected]"}]
Bin	Project externally exposed CLI interface, available to other projects using scripts	"Bin": {"Module-name": "./bin/module-name"}
Scripts	Define NPM script commands, key values indicate command names, value values indicate the script or script path for the command, npm run or npm run-script you can execute the corresponding command	"Scripts": {"clean": "Rimraf Lib Dist es coverage", "lint": "eslint src Test Examples build", "Start": "Node Node_modules /react-native/local-cli/cli.js Start "
Main	The main entry point of the project-generated package, which is require(‘{module name}‘) require to this file when called in node	"Main": "Lib/index.js"
Repostitory	If our project is open source, this field is used to indicate the project's warehouse URL and the type of version control system, which makes it easy for other developers to contribute code	"Repository": {"type": "Git", "url": "Https://github.com/reactjs/redux.git"}
Bugs	Users can submit bugs URLs or e-mail addresses	"Bugs": {"url": "Https://github.com/reactjs/redux/issues"}
Keywords	Describe the package's keyword information to allow users to search the package by keyword	"keywords": ["Redux", "reducer", "state", "predictable", "functional", "immutable", "Hot", "Live", "Replay", "Flux", "Elm ”]
Dependencies	The production of this package relies on the automatic installation of these dependencies when the user installs your	"Dependencies": {"react": "^15.1.0", "react-native": "^0.27.0-rc2"}
Devdependencies	This package is dependent on the development or testing phase and will not be packaged into the final production packages	"Devdependencies": {"Babel-eslint": "^5.0.0", "Eslint": "^2.1.0", "eslint-plugin-react": "^3.16.1"}
Preferglobal	Indicates that the npm install -g {module-name} package is expected to be installed globally, and this field is for use with the CLI-included, and other cases do not use this field	"Preferglobal": True
Private	When set to True, NPM will not publish the package, which is used primarily to prevent accidentally releasing an internally used private package to a public NPM registry	"Private": True
Publishconfig	Some of the configuration information used to publish this package, which overrides the default NPM configuration	"Publishconfig": {"Registry": "Https://your-private-hosted-npm.registry.nodejitsu.com"}
Subdomain	Indicate the application's subdomain, stating that it should contain only subdomain, not root domain
Analyze	If your package is hosted on Nodejitsu (https://www.nodejitsu.com/), setting this field to True,nodejitsu will automatically attempt to scan your package to find the missing dependencies in time, Possible bugs and grammatical errors, etc.	"Analyze": true
License	If the package is open source, specify the license agreement it follows here	"License": "MIT"

The file contents of a real project are Package.json as follows (taken from Redux-logger1)

{  "name":"Redux-logger",  "version":"2.6.1",  "Description":"Logger for Redux",  "Main":"Lib/index.js",  "Scripts":{    "Lint":"$ (npm bin)/eslint src",    "Test":"NPM Run Lint",    " Clean":"$ (npm bin)/rimraf Dist Lib",    "Build:lib":"$ (npm bin)/babel src--out-dir Lib",    "BUILD:UMD":"Library_name=reduxlogger node_env=development $ (npm bin)/webpack src/index.js dist/index.js--config Webpack.build.js ",    "Build:umd:min":"Library_name=reduxlogger node_env=production $ (npm bin)/webpack-p src/index.js dist/index.min.js--config Webpack.build.js ",    "Build":"NPM run build:lib && npm run BUILD:UMD && npm run Build:umd:min",    "Prepublish":"NPM Run clean && npm run test && npm Run Build"  },  "Files":[ "Dist", "Lib", "src" ],  "Repository":{"type": " git", "url": "Git+https://github.com/theaqua/redux-logger.git"   },  "keywords":[ "Redux", "Logger", "Redux-logger", "Redux", "middle Ware " ],  "author":"Eugene Rodionov (Https://github.com/theaqua)",  "License":"MIT",  "Bugs":{"url": "Https://github.com/theaqua/redux-logger/issues"  },  "Homepage":"Https://github.com/theaqua/redux-logger#readme",  "devdependencies":{    "@dtrussia/eslint-config-dtrussia":"2.2.1",    "babel-cli":"6.3.13",    "Babel-core":"6.3.13",    "Babel-eslint":"6.0.4",    "Babel-loader":"6.2.0",    "Babel-plugin-add-module-exports":"0.1.1",    "babel-preset-es2015":"6.3.13",    "babel-preset-react":"6.3.13",    "babel-preset-stage-0":"6.3.13",    "Eslint":"2.10.2",    "eslint-plugin-react":"5.1.1",    "Rimraf":"2.4.4",    "Webpack":"1.12.9"  },  "Dependencies":{"deep-diff": "0.3.4"  }}

Module Management for NPM

Being familiar with the common commands of NPM often makes your work more effective. First, we introduce the most commonly used npm install commands, which are used to install dependent modules into the node_modules directory, the dependencies are divided into two types: production environment dependency and development environment dependency, this has been described in the previous section, the corresponding commands are as follows:

// 生产环境的依赖-dev// 开发环境的依赖

Before installing, NPM checks node_modules whether the specified module already exists in the directory and, if so, does not reinstall it, even if the module already has a new version. Of course, we can force the latest version to be reinstalled by adding -f or --force parameters. After installation of the above command, we can find the Redux package in the directory, but the contents of the node_modules package.json file did not change, in order to release our package for other developers to use, they can automatically install these dependencies, we need to write a dependency to the package.json file, Of course you can choose to write manually, but the more convenient way is to npm install add parameters at the time --save , as follows:

--// 生产环境的依赖--save-dev// 开发环境的依赖

Then NPM will automatically help us write package.json to the file as follows:

{  ...  "dependencies{    ...    "redux": "^3.5.2"  },  "devDependencies{    "eslint": "^2.11.1"  }}

With a dependent installation, there are also uninstall commands, which is simple, the npm uninstall following parameter is the package name that needs to be uninstalled, for example npm uninstall redux .

The Demo project generated earlier with the commands provided by React Native react-native init AwesomeProject has automatically generated the files for us package.json , and if we manually build a React Native project ourselves, we can choose to copy from other works package.json and make modifications This is done by using a npm init command to generate it. In Terminal npm init , NPM will guide us through the steps to enter some key fields, the resulting file content is as follows, and the fields you see are almost every project required:

{  "name":"asce1885",  "version":"1.0.0",  "Description":"One Piece",  "Main":"Index.js",  "Scripts":{"test": "Op"  },  "Repository":{"type": "git", "url": "git+https://github.com/paichyperiondev/ Mobiledevweekly.git "  },  "keywords":[ "mobile", "Dev" ],  "author":"asce1885",  "License":"MIT",  "Bugs":{"url": "Https://github.com/PaicHyperionDev/MobileDevWeekly/issues"  },  "Homepage":"Https://github.com/PaicHyperionDev/MobileDevWeekly#readme"}

When a third party relies on a library to publish a new version, our project also needs to be upgraded with a npm update command to upgrade the specified package, for example npm update redux . At the same time, we can npm outdated query whether there is a new version in all the NPM packages currently installed by executing a command.

In general, mastering the above commands, for the development of React Native is enough, for unfamiliar commands, we can npm help query the use of the corresponding command, such as input npm help registry , will get the following results:

NPM scripts

In the previous section we introduced the module management capabilities of NPM, in fact, the other function of NPM is to execute the script. The scripts that we define in the fields of the package.json file scripts can be passed npm run or npm run-script executed, for example, in the React Native project, we can define the following scripts to create, launch the Android emulator, start the node service and package, and so on:

"Scripts": {    "avd:create":"Android Create avd-t 1-n muchvote-d 9-b x86_64-s 1440x2560",    "Avd:start":"Emulator-avd muchvote-gpu on-dpi-device 560-scale ${scale:-0.25}",    "Adb:reverse":"adb reverse tcp:8081 tcp:8081",    "Android":"NPM Run adb:reverse && node node_modules/react-native/local-cli/cli.js run-android",    "Start":"NPM run adb:reverse && node_modules/react-native/packager/packager.sh",  }

After the definition is complete, you can execute the corresponding command in the React Native directory as follows:

npm run adb:reversenpm run android...

To facilitate the execution of the script, NPM defines the shortcut keys for the commands by default, for example, and npm test npm start so on, which npm stop means we omit the input when we execute the commands run . These shortcuts are defined in addition to the time it takes to execute the commands, and more importantly, the naming of these commands is a common convention, and many persistent build platforms such as Travis will default to the node. JS Project Add npm test command, and these common command definitions also make it easier for other developers to use your package.

NPM provides pre- and these two hooks for each command -post , indicating that the corresponding hook commands are executed before and after the command is executed. For example, in the following script, when the user executes the command, NPM actually executes the command before executing the command npm run test pretest test .

"scripts": {    "eslint"eslint --rulesdir **",    "test"mocha test/",    "pretest"npm run eslint"  }

When a command is more complex, we can also define the command in a separate file and js then execute it as follows node :

"scripts": {    "build""node build.js"}

This series of introduction to NPM here, basically for the development of React Native is sufficient, if you are not satisfied with these basic knowledge, you can read the expansion of the Reading section of the document, further study.

Expand Reading

NPM Official Documentation 2
Why do I give up Gulp and Grunt, and switch to NPM scripts 3 4 5
"Introduction to Using NPM as a Build Tool" 6
"How to use NPM as a Build Tool" 7
"Package.json" 8
"Play with NPM" 9
"Play with NPM" 10
Introduction to the installation mechanism of NPM modules 11

Please pay attention to my public number, focus on the original or share the Android,ios,reactnative,web front-end mobile development in the field of high-quality articles, including the industry's latest developments, cutting-edge technology trends, open source function libraries and tools.

1. Https://github.com/evgenyrodionov/redux-logger?
2. https://docs.npmjs.com/?
3. Http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part1?
4. Http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part2?
5. Http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part3?
6. https://medium.com/@dabit3/INTRODUCTION-TO-USING-NPM-AS-A-BUILD-TOOL-B41076F488B0#.TYLYOVXDW?
7. Http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/?
8. Http://browsenpm.org/package.json#description?
9. http://www.alloyteam.com/2016/03/master-npm/?
10. Https://github.com/icepy/_posts/issues/36?
11. Http://www.ruanyifeng.com/blog/2016/01/npm-install.html?

My React Native Skill Tree Lighting Program のjavascript module Manager npm