回覆列表
  • 1 # 改不了吧

    Node.js用c++語言編寫而成的,是一個基於chrome V8引擎的javascript執行環境,讓javaScript的執行脫離瀏覽器服務端,可以使用javaScript語言書寫伺服器端程式碼

    1.使用node來實現一個http伺服器

    下面建立了一個埠為8787的伺服器.他與php,java等不同,像php本地還要基於阿帕奇伺服器,node.js能用程式碼快速搭建一個伺服器。

    // 引入http模組

    var http = require("http");

    // 呼叫http的介面建立伺服器;回撥--->非同步;

    var server = http.createServer(function(req,res){

    // request:瀏覽器提交給伺服器相關;response:伺服器到瀏覽器;

    console.log(111);

    // 設定編碼格式

    res.setHeader("Content-type","text/html;charset=utf8");

    res.write("<h1>hello world 11233</h1>");

    res.write("你好世界");

    res.end();

    })

    server.listen(8787);

    模組化

    1. 模組化開發

    1.CommonJS就是為JS的表現來制定規範,因為js沒有模組的功能所以CommonJS應運而生,它希望js可以在任何地方執行,不只是瀏覽器中。

    2.建立自己的模組

    node.js中名稱空間是獨立的

    在一個模組裡引入另一個模組的方法或者變數使用require

    •引入fnData模組

    require("./fnData");

    •匯入與匯出(匯出變數或者函式)

    module.exports = {

    myFn:test.myFn,

    a:test.a

    }

    2. 內建模組

    nodejs內建模組有:Buffer,C/C++Addons,Child Processes,Cluster,Console,Cr

    ypto,Debugger,DNS,Domain,Errors,Events,File System,

    Globals,HTTP,HTTPS,Modules,Net,OS,Path,Process,P unycode,Query Strings,Readline,REPL,Stream,String De coder,Timers,TLS/SSL,TTY,UDP/Datagram,URL, Utilities,V8,VM,ZLIB;內建模組不需要安裝,外接模組需要安裝;

    3. npm

    1.一組模組的集合,是node的包管理器

    下面npm常用的終端命令

    1.

    安裝Node模組

    npm install moduleNames

    將包安裝到全域性環境中

    npm install <name> -g

    安裝的同時,如果有package.json檔案時,命令將資訊寫入package.json中專案路徑中

    npm install <name> --save

    2.檢視node模組的package.json資料夾npm view moduleNames

    3.檢視當前目錄下已安裝的node包

    npm list

    4.檢視幫助命令

    npm help

    5.檢視包的依賴關係

    npm view moudleName dependencies

    6.檢視包的原始檔地址

    npm view moduleName repository.url

    7.檢視包所依賴的Node的版本

    npm view moduleName engines

    8.檢視npm使用的所有資料夾

    npm help folders

    9.用於更改包內容後進行重建

    npm rebuild moduleName

    10.檢查包是否已經過時,此命令會列出所有已經過時的包,可以及時進行包的更新

    npm outdated

    11.更新node模組

    npm update moduleName

    12.解除安裝node模組

    npm uninstall moudleName

    13.一個npm包是包含了package.json的資料夾,package.json描述了這個資料夾的結構。訪問npm的json資料夾的方法如下:

    $ npm help json

    此命令會以預設的方式開啟一個網頁,如果更改了預設開啟程式則可能不會以網頁的形式開啟。

    14.釋出一個npm包的時候,需要檢驗某個包名是否已存在

    $ npm search packageName

    15.npm init:會引導你建立一個package.json檔案,包括名稱、版本、作者這些資訊等

    16.npm root:檢視當前包的安裝路徑

    npm root -g:檢視全域性的包的安裝路徑

    17.npm -v:檢視npm安裝的版本

    4. webpack

    概念:是近的一載入器兼打包工具,它能把各種資源,例如J (含J X)、 coffee、樣式(含less/sass)、圖片等都作為模組來使用和處理。

    配置步驟

    1.全域性安裝webpack

    npm install webpack -g

    2.新建webpack.config.js編寫此配置檔案

    module.exports = {

    // 當前執行檔案的路徑

    // 輸入

    entry:__dirname+"/app/index.js",

    // 輸出

    output:{

    path:__dirname+"/build",

    filename:"bundle.js"

    },

    module:{

    loaders:[{

    test:/\.css$/,

    loader:"style-loader!css-loader"

    }]

    },

    watch:true,

    devServer: {

    contentBase: "./build",//本地伺服器所載入的頁面所在的目錄

    historyApiFallback: true,//不跳轉

    inline: true//實時重新整理

    },

    }

    3.使用下面終端命令初始化自動建立package.json檔案,一直按enter就可以了

    npm init

    4.package.json檔案已經就緒,我們在本專案中安裝Webpack作為依賴包

    // 安裝Webpack

    npm install --save-dev webpack

    接著在資料夾中新建app和build資料夾,app資料夾放我們要寫的js,css等模組檔案,build裡放webpack打包生成的js檔案以及一個index.html

    此時目錄結構如下:

    5.在inex.html檔案中引入自動生成的bundle.js

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Title</title>

    </head>

    <body>

    <div></div>

    </body>

    <script src="bundle.js"></script>

    </html>

    在module1.js中定義一些變數與方法,作為一個模組使用exports匯出

    console.log("我是module1.js");

    var a = "我是a變數";

    var fn = function(){

    console.log("我是fn函式");

    }

    module.exports = {

    a,

    fn

    }

    在index.js中使用require引入module.js的方法與變數

    var res = require("./module1");

    require("./index.css");

    console.log("我是index.js");

    console.log(res.a);

    res.fn();

    6.終端執行webpack

    webpack

    7.在package-loack.json中scripts配置

    對npm進行配置後可以在命令列中使用簡單的npm start命令來替代webpack的命令

    像 下面配置後,npm dev可以代替 npm webpack-dev-server --open命令

    {

    "dependencies": {

    "css-loader": "^0.28.8",

    "style-loader": "^0.19.1",

    "webpack": "^3.10.0"

    },

    "devDependencies": {

    "webpack-dev-server": "^2.11.0"

    },

    "scripts": {

    "start": "webpack",

    "dev": "webpack-dev-server --open"

    }

    }

    此時輸入npm start 就可以打包檔案了

    總結

  • 中秋節和大豐收的關聯?
  • 三生三世枕上書的結局是什麼?是悲是喜?東華鳳九可在一起了?