前段時(shí)間閑下來(lái)了，自學(xué)了一段時(shí)間nodejs，express，React等。在這里總結(jié)以下筆記。
首先去nodejs官方網(wǎng)站下載nodejs安裝好，這個(gè)我就不多說(shuō)了，自行安裝。
然后首先介紹下nodejs命令。
npm 常用命令
npm install moduleNames ? ? ? ? ? ? ? ? ? ? //安裝模塊
npm install moduleNames@3.9.1 ? ? ? ? ?//安裝制定版本
npm install moduleNames -g? ? ? ? ? ? ? ? ? //將包安裝到全局環(huán)境中
npm install? modulesName? --save? ? ? ? //安裝的同時(shí)，將信息寫(xiě)入package.json中(如果有package.json文件時(shí)，直接使用npm install方法就可以根據(jù)package.json配置安裝所有的依賴包，這樣代碼提交到github時(shí)，就不用提交node_modules這個(gè)文件夾了)
npm list? ? ? ? ? ? ? ? ? ? ? ? ? ? //查看當(dāng)前目錄下已安裝的node包
npm help ? ? ? ? ? ? ? ? ? ? ? ?//查看幫助命令
npm view moudleName dependencies ? ? ? ? ? ? ? ? // 查看包的依賴關(guān)系
npm view moduleName repository.url ? ? ? ? ? ? ?//查看包的源文件地址
npm view moduleName engines ? ? ? ? ? ? //查看包所依賴的Node的版本
npm help folders ? ? ? ? ? ? ? ? ? ? ? ? //查看npm使用的所有文件夾
npm rebuild moduleName ? ? ? ? ? ? ? ? ?//用于更改包內(nèi)容后進(jìn)行重建
然后介紹下webpack，前端的一個(gè)工具，可以讓各個(gè)模塊進(jìn)行加載，預(yù)處理，再進(jìn)行打包，功能強(qiáng)大，下面給推薦幾個(gè)webpack的學(xué)習(xí)以及配置方法
一小時(shí)包教會(huì) —— webpack 入門(mén)指南
為了使用 webpack，先新建一個(gè)空前端項(xiàng)目，創(chuàng)建一個(gè)目錄，目錄結(jié)構(gòu)如下:
├── index.html ? ? ? ? ? ? ? ? ? ? ? ?// 入口 HTML
├── dist ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // dist 目錄放置編譯過(guò)后的文件文件
└── src ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// src 目錄放置源文件
? ? ? ? ? ? └── index.js ? ? ? ? ? ? ? ? ? ? ? // 入口 js
└── webpack.config.js ? ? ? ? ? ? ? ? ?//配置webpack
如果需要配置一個(gè)小型服務(wù)器的話，就要使用到?webpack-dev-server，
Webpack-dev-server結(jié)合后端服務(wù)器的熱替換配置
然后再給介紹下Gulp，gulp是前端開(kāi)發(fā)過(guò)程中對(duì)代碼進(jìn)行構(gòu)建的工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器，它不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化，而且在開(kāi)發(fā)過(guò)程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；使用它，我們不僅可以很愉快的編寫(xiě)代碼，而且大大提高我們的工作效率。
前端自動(dòng)化工具 -- gulp 使用簡(jiǎn)介
接下來(lái)介紹下我自己寫(xiě)的一個(gè)react router的案例
express ? router ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//使用express創(chuàng)建一個(gè)工程，
cd ?router ? ? ? ? ? ? ? ?
npm install ? ? ? ? //安裝express
npm install ejs ? ?//安裝ejs模塊(因?yàn)閑xpress默認(rèn)使用jade模版引擎，開(kāi)發(fā)一些功能不方便，個(gè)人喜歡ejs所以就用ejs)
修改app.js配置模版引擎
修改view目錄下的index.jade為index.ejs，并把index.ejs代碼修改為html代碼，如下
在項(xiàng)目的public目錄下新建dist? src文件夾，
dist 目錄放置編譯過(guò)后的文件文件，src放置源文件(即開(kāi)發(fā)文件)，然后安裝webpack，創(chuàng)建以及配置webpack.config.js
npm install webpack
npminstallbabel-loader babel-preset-es2015 babel-preset-stage-0babel-preset-react babel-polyfill--save-dev ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//安裝es5 ?babel，用來(lái)將es6轉(zhuǎn)換成es5
如果需要用到gulp，則安裝gulp，配置gulpfile.js
npm install ?gulpjs/gulp-cli -g
npm install ?gulpjs/gulp.git#4.0--save-dev
npm install ?gulp-util del gulp-rename gulp-less gulp-connect connect-rest@1.9.5--save-dev
如需同時(shí)使用webpack以及gulp，配置請(qǐng)參考以下鏈接gulp+webpack配置
配置完成之后，開(kāi)始開(kāi)發(fā)你的項(xiàng)目把，
例如：
在src目錄下創(chuàng)建index.js，
console.log('hello world');
啟動(dòng)express服務(wù)器
npm start
瀏覽器輸入?http://localhost:3000/，即可訪問(wèn)頁(yè)面，打開(kāi)控制臺(tái)即可看到 ?hellow world
