Node.js 笔记三：了解npm

约定不等于承诺〃 2022-07-10 04:56 157阅读 0赞

转载自：http://www.jianshu.com/p/7f8d6a40e725

> 如果你被 Bower / spm / Component / Duo ... 坑过，请回到npm的怀抱。  
> \---来自[前端 JSer 装逼手册][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][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 vue@1.0.0 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实时预览][-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][Awesome GIS]  
转载，请表明出处。[总目录前端经验收集器][Link 1]

学习前端的过程中，我整理了很多资料，也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量，入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人，每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加 **笑笑微信：iamaixiaoxiao**，拉你入群。再次强调，保证群高质量，群非前端不加，请谅解哦。扫描微信二维码也可以。

![Center][]

[JSer]: https://segmentfault.com/a/1190000005987011
[vue-leaflet]: https://github.com/brandonxiang/vue-leaflet
[package.json]: https://github.com/brandonxiang/vue-leaflet/blob/master/package.json
[The semantic versioner for npm]: https://docs.npmjs.com/misc/semver
[Difference between tilde_ and caret_ in package.json]: http://stackoverflow.com/questions/22343224/difference-between-tilde-and-caret-in-package-json
[-atom_html]: https://www.zhihu.com/question/48559022/answer/111482787?from=profile_answer_card
[watchify]: https://github.com/substack/watchify
[uglifyjs]: https://github.com/mishoo/UglifyJS
[uglifycss]: https://github.com/fmarcia/UglifyCSS
[Awesome GIS]: http://www.jianshu.com/p/3b3efa92dd6d
[Link 1]: http://www.jianshu.com/p/c1e3b96c1293
[Center]: /images/20220709/a968e7e8cb004bc2b6a24cb78175d4d1.png