一 .web開發工具(node npm Bower webpack)使用介紹

時間 2019-11-10

標籤 web 開發工具 node npm bower webpack 使用介紹欄目 HTML 简体版

原文原文鏈接

一 .npm

https://www.npmjs.com/ 第三方包搜索javascript

http://www.javashuo.com/article/p-aujtmqek-et.html css

https://www.npmjs.cn/getting-started/what-is-npm/ html

https://www.runoob.com/nodejs/nodejs-npm.html NPM 使用介紹前端

npm全稱爲Node Package Manager，是一個基於Node.js的包管理器，也是整個Node.js社區最流行、支持的第三方模塊最多的包管理器。

ode環境下：node_modules裏面的文件

package.json來制定名單，須要哪些npm包來參與到項目中來，npm install命令根據這個配置文件增減來管理本地的安裝包。

dependencies(項目依賴庫):在安裝時使用--save則寫入到dependencies
和devDependencies（開發依賴庫）：在安裝時使用--save-dev將寫入到devDependencies
node_modules文件裏的依賴所有安裝：npm install
node_modules文件裏的依賴只安裝dependencies：npm install --production
node_modules文件裏的依賴只安裝devDependencies：npm install packagename --dev
例：安裝vant依賴：
node使用npm install vant –save 更新到dependencies下；生產環境必須。
node使用npm install vant –save -dev 更新到devDependencies下；用於開發階段。

. devDependencies和dependencies的區別：

devDependencies裏面的插件只用於開發環境，不用於生產環境，即輔助做用，打包的時候須要，打包完成就不須要了。而dependencies是須要發佈到生產環境的，自始至終都在。好比wepack等只是在開發中使用的包就寫入到devDependencies，而像vue這種項目全程依賴的包要寫入到devDependencies。vue

2. file-loader和url-loader的區別：

以圖片爲例，file-loader可對圖片進行壓縮，可是仍是經過文件路徑進行引入，當http請求增多時會下降頁面性能，而url-loader經過設定limit參數，小於limit字節的圖片會被轉成base64的文件，大於limit字節的將進行圖片壓縮的操做。總而言之，url-loader是file-loader的上層封裝。java

https://jingyan.baidu.com/article/25648fc19c14839191fd0027.html HBuilder集成使用Gitnode

node npm 項目運行webpack

https://github.com/bailicangdu/vue2-happyfri    vue項目
## 項目運行（nodejs 6.0+）
``` bash
# 克隆到本地
git clone https://github.com/bailicangdu/vue2-happyfri.git

# 進入文件夾
cd vue2-happyfri     當前目錄 
                       C:\Users\86173>cd H:\web\test\2\vue2-happyfri-master
                       C:\Users\86173>H:
                       H:\web\test\2\vue2-happyfri-master>npm install   安裝依賴


# 安裝依賴
npm install 或 yarn(推薦)

# 開啓本地服務器localhost:8088
npm run dev 或者   npm start

package.json


{
  "name": "happyfri",
  "version": "1.0.2",
  "description": "vue2-happyfri",
  "author": "cangdu <1264889788@qq.com>",
  "private": true,
  "scripts": {
    "start": "node build/dev-server.js", // "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.1.0",
    "vue-router": "^2.1.1",
    "vuex": "^2.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "autoprefixer-loader": "^3.2.0",
    "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",
    "babel-register": "^6.0.0",
    "babel-runtime": "^6.23.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.15.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "less": "^3.9.0",
    "less-loader": "^2.2.3",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.4",
    "style-loader": "^0.13.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-dev-server": "^3.1.14",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

npm 使用國內鏡像的方法

https://www.jianshu.com/p/d418a62ae610  
http://www.javashuo.com/article/p-yshhbbwj-bh.html

一.經過命令配置
1. 命令

npm config set registry https://registry.npm.taobao.org
2. 驗證命令

npm config get registry
若是返回https://registry.npm.taobao.org，說明鏡像配置成功。

 

2、經過使用cnpm安裝
1. 安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 使用cnpm

cnpm install xxx




安裝完node.js並配置環境變量。在cmd窗口檢查npm安裝是否成功。

安裝淘寶npm：

1.臨時使用
npm --registry https://registry.npm.taobao.org install express
1
2.持久使用
npm config set registry https://registry.npm.taobao.org
1
配置後可經過下面方式來驗證是否成功 
npm config get registry
或 
npm info express
3.經過cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
1
使用 
cnpm install express

二. node

根據官方文檔能夠知道，node就是一個給予谷歌v8引擎的一個javascript的運行時，能夠理解爲運行js的一個虛擬機。他使用的是一個 事件驅動，非阻塞I/O模型 ，他是將js的運行環境搬到了服務器端，和客戶端沒有一點關係。是一個純服務端的東西，node只是爲js提供了一個平臺。node裏面其實還分了兩塊，一是封裝了v8引擎，目的是爲了執行es（如定義變量，定義函數等），另一個提供了大量的工具庫,是幫助node實現各類功能的，提供了一些之前js的環境辦不到的事情，好比文件操做，網絡操做，操做系統的操做。
    既然node是一個平臺（所謂的平臺就是用來運行特定語言的），也就意味着node是用來運行語言的，那麼java也是語言，node能運行java嗎？據nodejs創始人Ryan Dahl回憶，他最初是選擇了Ruby這門語言，可是Ruby這門語言的虛擬機效率不怎麼樣最終放棄了，按照這種思路，貌似node將java的虛擬機集成進來應該能夠運行java，但node做者最終選擇了javascript。這樣js就實現了在服務端運行的可能，js運行在node平臺上（分爲v8部分，用來執行es，和大量的工具庫組件（API）稱之爲libuv，提供了之前js的環境辦不到的事，如文件操做，網絡操做等等）。

http://nodejs.cn/api/ Node.js v12.11.1 文檔git

三. Bower

https://bower.io/ Web的軟件包管理器github

http://www.javashuo.com/article/p-eafkecxs-bs.html bower的安裝和使用

https://lzw.me/a/bower-getting-started.html#4.%20%E4%BD%BF%E7%94%A8%20bower%20%E4%B8%8B%E8%BD%BD%E5%BA%93 Web 前端開發的包管理工具 bower 快速入門

網站由不少東西組成-框架，庫，資產和實用程序

Bower能夠管理包含HTML，CSS，JavaScript，字體甚至圖像文件的組件。Bower不會串聯或縮小代碼或執行其餘任何操做-只是安裝所需的正確版本的軟件包及其依賴項。

要上手，鮑爾的工做原理是獲取和安裝包都在從，以狩獵的照顧，尋找，下載和保存您正在尋找的東西。Bower在清單文件中跟蹤這些軟件包bower.json
。如何使用軟件包取決於您。Bower提供了掛鉤，以方便在工具和工做流程中使用軟件包。

4. webpack 使用

webpack介紹

webpack是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。

還能夠按需加載的模塊進行代碼分離，等到實際須要的時候再異步加載。經過loader的轉換，任何形式的資源均可以視做模塊。好比CommonJS模塊,

AMD模塊，ES6模塊，CSS，圖片，JSON，less等

http://www.javashuo.com/article/p-fqxfqowy-cd.html webpack使用

https://www.runoob.com/w3cnote/webpack-tutorial.html Webpack 入門教程

https://www.jianshu.com/p/0094d194b68f webpack使用

https://blog.csdn.net/lplife/article/details/80875815 簡單地使用webpack進行打包