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 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實時預覽。

我們只需要在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
轉載，請表明出處。總目錄前端經驗收集器