Node.js 笔记三：了解npm
如果你被 Bower / spm / Component / Duo ... 坑过，请回到npm的怀抱。
---来自前端 JSer 装逼手册
npm涵盖了很多内容，不仅仅是包管理那么简单，还有npm script等。
npm对应的文件是package.json。
初始化
在对应的文件夹中，输入npm init，配置对应的参数，如git repo，name，version之类。
包管理
通常情况下，项目并不是所有的包都是global安装，因为考虑到版本兼容的问题。环境的独立性成为项目的稳定性的关键，我们会倾向于选择local包安装。这和python的virtualenv类似。
包会被分为devDependencies和dependencies，主要区别是devDependencies针对的是开发工具，而dependencies更多是指内容依赖关系。拿vue-leaflet的package.json为例，由于运用了ES6所以有了babel。而webpack也具有各样的loader。
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"cross-env": "^1.0.6",
"css-loader": "^0.23.0",
"file-loader": "^0.8.4",
"json-loader": "^0.5.4",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.2.1",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
}
而dependencies承载的则是一些，可以被打包的库。
"dependencies": {
"babel-runtime": "^5.8.0",
"leaflet": "^0.7.7",
"q": "^1.4.1",
"vue": "^1.0.0"
},
版本控制
根据The semantic versioner for npm，我们可以知道为啥有^和~的版本控制。Difference between tilde(~) and caret(^) in package.json指出了其中的不同：
- ~3.9.2 是指相接近的版本 例如 3.9.* 指修复bug
- ^3.9.2 是指相兼容的版本 例如 3.. 指向后兼容，功能升级
这是，有人就想问是不是要编辑package.json文件，可以这么做。但是我们更喜欢高逼格的方法。用--save去保存dependencies的包，而--save-dev保存devDependencies的包。
npm install lodash --save
npm install browser-sync --save-dev
如果你想安装某个版本，则
npm install [email protected]
npm install sax@">=0.1.0 <0.2.0"
如果你想从github下载最新的也可以，但是不建议因为若版本再次更新则成为一坑。
npm install mygithubuser/myproject
更多详情，自行查npm help install。
npm script
使用的方法有很多，涵盖了单元测试，浏览器实时渲染，生成dict等等。
这里举一栗子，运用browser-sync实时刷新html和css，参考项伟平的回答-atom怎么实现html实时预览。
我们只需要在script底下，加一个dev指向一句CLI。在只是纯前端编码的大前提下，可以使用这句命令行来实现你要的功能，大大提高你的开发效率。
"scripts": {
"dev":"browser-sync start --server --files \"**/*.html,**/*.css\""
},
简易npm script
使用到watchify，uglifyjs，uglifycss等工具，详情看对应的文档。
"start": "npm run watch & serve -p 3001",
"watch": "watchify -v -d example/js/app.js -o example/js/bundle.js",
"build-js": "cat ./src/*.js > ./dist/app-src.js",
"build-css": "cat ./src/*.css > ./dist/app-src.css",
"compress-js": "uglifyjs ./dist/app-src.js -o ./dist/app.js -m",
"compress-css": "uglifycss ./dist/app-src.css > ./dist/app.css",
"build": "npm run build-js && npm run build-css && npm run compress-js && npm run compress-css",
"release": "git push origin master && git checkout gh-pages && git merge master && git push origin gh-pages && git checkout master && npm publish"
转载，请表明出处。总目录Awesome GIS
转载，请表明出处。总目录前端经验收集器