loader: 因為webpack自身只能處理JavaScript，使用loader可以處理非JavaScript的文件。 全局安裝 npm install webpack webpack-cli –g 本地安裝 npm install webpack webpack-cli --save-dev 版本查看 webpack -v 創建package.json文件 npm init -y 打包命令 webpack --config config/webpack.config.js https://www.ibm.com/developerworks/cn/opensource/os-nodejs/ NPM是什么？ NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種： 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。 允許用戶從NPM服務器下載并安裝別人編寫的命令行程序到本地使用。 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。 由于新版的nodejs已經集成了npm，所以之前npm也一并安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝 1. npm 命令安裝模組 $ npm install <Module Name> 模塊安裝完成之后， 就可以使用了。類似express 模塊 $ npm install express var express = require('express'); 2. 全局安裝與本地安裝 npm install express # 本地安裝 npm install express -g # 全局安裝 命令的差別就是后面是否 加 -g 參數 本地安裝，安裝的目錄是在命令行所在目錄， 可以使用require()來引入 全局安裝，是安裝在node的安裝目錄， 全局目錄可以設置。 可以直接在命令行使用而不使用require導入 3.package.json package.json 位于模塊的目錄下，用于定義包的屬性。 Package.json 屬性說明 name - 包名。 version - 包的版本號。 description - 包的描述。 homepage - 包的官網 url 。 author - 包的作者姓名。 contributors - 包的其他貢獻者姓名。 dependencies - 依賴包列表。如果依賴包沒有安裝，npm 會自動將依賴包安裝在 node_module 目錄下。 repository - 包代碼存放的地方的類型，可以是 git 或 svn，git 可在 Github 上。 main - main 字段指定了程序的主入口文件，require('moduleName') 就會加載這個文件。這個字段的默認值是模塊根目錄下面的 index.js。 keywords - 關鍵字 4. 查看安裝信息 $ npm list -g 5.卸載模塊 $ npm uninstall 模塊名 6. 更新模塊 $ npm update 模塊名 7. 搜索模塊 $ npm search 模塊名 NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。 NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。 使用npm help <command>可查看某條命令的詳細幫助，例如npm help install。 在package.json所在目錄下使用npm install . -g可先在本地安裝當前命令行程序，可用于發布前的本地測試。 使用npm update <package>可以把當前目錄下node_modules子目錄里邊的對應模塊更新至最新版本。 使用npm update <package> -g可以把全局安裝的對應命令行程序更新至最新版。 使用npm cache clear可以清空NPM本地緩存，用于對付使用相同版本號發布新版本代碼的人。 使用npm unpublish <package>@<version>可以撤銷發布自己發布過的某個版本代碼。 淘寶 NPM 鏡像是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。 你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm: $ npm install -g cnpm --registry=https://registry.npm.taobao.org 這樣就可以使用 cnpm 命令來安裝模塊了： $ cnpm install [name] Node.js REPL 上面使用的交互方式執行nodejs還有一個專業的名字， REPL. Node.js REPL(Read Eval Print Loop:交互式解釋器) 表示一個電腦的環境，類似 Window 系統的終端或 Unix/Linux shell，我們可以在終端中輸入命令，并接收系統的響應。 Node 自帶了交互式解釋器，可以執行以下任務： 讀取 - 讀取用戶輸入，解析輸入了Javascript 數據結構并存儲在內存中。 執行 - 執行輸入的數據結構 打印 - 輸出結果 循環 - 循環操作以上步驟直到用戶兩次按下 ctrl-c 按鈕退出。 Node 的交互式解釋器可以很好的調試 Javascript 代碼。 可以使用交互解釋器主要做： 1. 簡單的表達式運算 10-5 2. 使用變量 x=10 y=20 x+y 3. 多行表達式 var x=0 do{ x++ console.log("x="+x); }while(x<5); 4.下劃線(_)變量 可以使用下劃線(_)獲取上一個表達式的運算結果 這和shell腳本的用法很類似。 REPL 命令 ctrl + c - 退出當前終端。 ctrl + c 按下兩次 - 退出 Node REPL。 ctrl + d - 退出 Node REPL. 向上/向下 鍵 - 查看輸入的歷史命令 tab 鍵 - 列出當前命令 .help - 列出使用命令 .break - 退出多行表達式 .clear - 退出多行表達式 .save filename - 保存當前的 Node REPL 會話到指定文件 .load filename - 載入當前 Node REPL 會話的文件內容。 Nodejs 回調 Node.js 異步編程的直接體現就是回調。 異步編程依托于回調來實現，但不能說使用了回調后程序就異步化了。 回調函數在完成任務后就會被調用，Node 使用了大量的回調函數，Node 所有 API 都支持回調函數。 1. 創建一個測試文件nodefile.txt ， 內容如下 This is Test File for Nodejs.... 2. 創建同步阻塞的例子 sync.js var fs = require("fs"); var data = fs.readFileSync('nodefile.txt'); console.log(data.toString()); console.log("It's End!"); 3. 創建異步回調的例子 var fs = require("fs") fs.readFile("nodefile.txt",function(err,data){ if(err) return console.error(err); console.log(data.toString()); }); console.log("It's End!"); 同步和異步執行結果的差別是， 同步是把文件內容讀完之后， 在繼續后面的 異步不需要文件內容讀完， 后面的就開始執行。 grunt是一套前端自動化工具，是一個基于nodeJs的命令行工具。對于需要反復重復的任務，例如壓縮、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。 Grunt和所有grunt插件都是基于nodejs來運行的 ?https://nodejs.org/? grunt-CLI 　　“CLI”被翻譯為“命令行”。要想使用grunt，首先必須將grunt-cli安裝到全局環境中，使用nodejs的“npm install…”進行安裝。 Linux 安裝 1. 下載 2、下載完成后用ftp上傳到Linux任意文件夾即可。我的是/usr/local。然后進入到此文件夾。 cd /usr/local 1 3、在此目錄下解壓 #tar xf node-v8.3.0-linux-x64.tar.xz 1 4、解壓后進入到解壓后的文件夾。 #cd node-v8.3.0-linux-x64 1 5、設置node和npm為全局變量。 #ln -s /home/chuan/chuansoft/node-v8.3.0-linux-x64/bin/node /usr/local/bin/node #ln -s /home/chuan/chuansoft/node-v8.3.0-linux-x64/bin/npm /usr/local/bin/npm 1 2 6、隨便進入到其他文件夾測試。 #node -v #npm -v verbose stack Error: docdokuplm@1.1.0 predev: `npm install && node_modules/.bin/bower install` 沒有bowser verbose stack Error: docdokuplm@1.1.0 predev: `npm install && node_modules/.bin/bower install` 12 verbose stack Exit status 1 12 verbose stack at EventEmitter.<anonymous> (D:\inssoftware\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:283:16) 12 verbose stack at emitTwo (events.js:126:13) 12 verbose stack at EventEmitter.emit (events.js:214:7) 12 verbose stack at ChildProcess.<anonymous> (D:\inssoftware\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 12 verbose stack at emitTwo (events.js:126:13) 12 verbose stack at ChildProcess.emit (events.js:214:7) 12 verbose stack at maybeClose (internal/child_process.js:925:16) 12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5) 13 verbose pkgid docdokuplm@1.1.0 14 verbose cwd D:\software\003-PLM\docdoku-web-front-dev 15 verbose Windows_NT 6.1.7601 16 verbose argv "D:\\inssoftware\\nodejs\\node.exe" "D:\\inssoftware\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev" 17 verbose node v8.11.1 18 verbose npm v5.8.0 19 error code ELIFECYCLE npm config set prefix D:\inssoftware\nodejs\ npm config set cache D:\inssoftware\nodejs\node_cache" //可有可無 npm config get prefix C:\Users\{UserName}\.npmrc 刪除這個文件，就刪除以上配置了 node_global用于安裝全局的模塊，如果不設置的話，Win7 默認安裝在 C:\Users\{UserName}\AppData\Roaming\npm\node_modules NPM NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種： 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。 允許用戶從NPM服務器下載并安裝別人編寫的命令行程序到本地使用。 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。 由于新版的nodejs已經集成了npm，所以之前npm也一并安裝好了。同樣可以通過輸入?"npm -v"?來測試是否成功安裝。命令如下，出現版本提示表示安裝成功: npm 安裝 Node.js 模塊語法格式如下： $ npm install <Module Name> 安裝好之后，express 包就放在了工程目錄下的 node_modules 目錄中，因此在代碼中只需要通過?require('express')?的方式就好，無需指定第三方包路徑。 npm 的包安裝分為本地安裝（local）、全局安裝（global）兩種，從敲的命令行來看，差別只是有沒有-g而已，比如 npm install express # 本地安裝 n npm install express -g # 全局安裝 如果出現以下錯誤： npm err! Error: connect ECONNREFUSED 127.0.0.1:8087 解決辦法為： $ npm config set proxy null 卸載模塊 我們可以使用以下命令來卸載 Node.js 模塊。 $ npm uninstall express 更新模塊 我們可以使用以下命令更新模塊： $ npm update express 搜索模塊 使用以下來搜索模塊： $ npm search express 創建模塊 創建模塊，package.json 文件是必不可少的。我們可以使用 NPM 生成 package.json 文件，生成的文件包含了基本的結果。 接下來我們就用以下命令來發布模塊： $ npm publish NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。 使用npm help <command>可查看某條命令的詳細幫助，例如npm help install。 在package.json所在目錄下使用npm install . -g可先在本地安裝當前命令行程序，可用于發布前的本地測試。 使用npm update <package>可以把當前目錄下node_modules子目錄里邊的對應模塊更新至最新版本。 使用npm update <package> -g可以把全局安裝的對應命令行程序更新至最新版。 使用npm cache clear可以清空NPM本地緩存，用于對付使用相同版本號發布新版本代碼的人。 使用npm unpublish <package>@<version>可以撤銷發布自己發布過的某個版本代碼。 npm run XXX是執行配置在package.json中的腳本，比如： "scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js", "unit": "karma start test/unit/karma.conf.js --single-run", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" } 只有這里配置了，你才能run，所以不是所有的項目都能npm run dev/build。要了解這些命令做了什么，就要去scripts中看具體執行的是什么代碼。這里就像是一些命令的快捷方式，免去每次都要輸入很長的的命令（比如unit那行）。 模塊： 1. Polymer 釋放組件的力量，Polymer是一個可以幫助你創建自定義的可重用的HTML元素的JavaScript庫，可以用來構建高性能，可維護的app 2.bower bower 的話，從一開始，就是專門為前端表現設計的包管理器，一切全部為前端考慮的。npm 和bower 的最大區別，就是 npm 支持嵌套地依賴管理，而 bower只能支持扁平的依賴（嵌套的依賴，由程序員自己解決）。 現在不建議使用bower了。官方已經停止維護，建議直接使用npm就可以了 $ polymer serve --port 8080 Polymer CLI是一個命令行界面，用于使用Polymer App Toolbox構建具有Polymer和應用程序的元素。 它簡化了您的工作流程，使您可以輕松管理從簡單組件到復雜Web應用程序的項目。 1. windows 命令行看一下是否安裝了 polymer-cli npm search polymer-cli 如果沒有安裝的話， 使用 npm install -g polymer-cli 進行安裝 2. 建立項目目錄 D:\devworkspace\nodejs\polymer-app polymer-app 3. 切換到項目目錄， 初始化項目 ： polymer init 選擇需要的模板后， 回車， 這里選擇3.0 簡單的元素模板 4. 啟動服務 polymer serve --port 8080 以下添加vaadin的Checkbox進來 下載vaadin的checkbox包 npm i @vaadin/vaadin-checkbox --save 到demo目錄，修改 index.html 加上 import '@vaadin/vaadin-checkbox/vaadin-checkbox.js'; html 加上 <vaadin-checkbox checked>I agree with <a href>Terms &amp; Conditions</a></vaadin-checkbox> 進入以下地址： http://127.0.0.1:8080/components/polymer-app/demo/ npm 是伴隨Node.js 出現的一個包管理器，最開始只能支持 Node.js 的模塊管理，但是后來， npm官網經過一次改版，打出的口號是javascript 的包管理器，所以，其已經不在局限于是Node.js 的模塊管理了，已經通用到了所有 js 的包管理工具了，可以說，前后通吃了。 bower 的話，從一開始，就是專門為前端表現設計的包管理器，一切全部為前端考慮的。npm 和bower 的最大區別，就是 npm 支持嵌套地依賴管理，而 bower只能支持扁平的依賴（嵌套的依賴，由程序員自己解決）。 現在不建議使用bower了。官方已經停止維護，建議直接使用npm就可以了。 Node.js、npm和yarn Node.js, 運行在服務端的JavaScript環境， 相當于Java虛擬機(JRE)的作用。 npm： 包管理工具， 作用類似于Maven。在安裝Node.js時會一并安裝 yarn： 作用于npm類似， 但比npm更好用， 需要額外安裝。 Windows 下安裝 下載地址： https://yarnpkg.com/zh-Hans/docs/install#windows-stable 安裝成功驗證 yarn --version yarn install 在本地?node_modules?目錄安裝?package.json?里列出的所有依賴。 yarn install --no-lockfile 不讀取或生成?yarn.lock?鎖文件。 淘寶鏡像 npm 方式 n npm config set registry https://registry.npm.taobao.org --global n npm config set disturl https://npm.taobao.org/dist --global y yarn 方式 y yarn config set registry https://registry.npm.taobao.org --global y yarn config set disturl https://npm.taobao.org/dist --global