在當(dāng)前目錄下打開命令行
shift+鼠標(biāo)右擊(打開命令行窗口)
項(xiàng)目環(huán)境搭建
參考資料
https://segmentfault.com/a/1190000006178770
1.創(chuàng)建package.json文件
npm init
2.安裝依賴插件
配置package.json文件(devDependencies為開發(fā)依賴插件，將在項(xiàng)目上線后自動(dòng)卸載欣范；dependencies為項(xiàng)目運(yùn)行必需插件衔肢，始終存在鸦列。)
"devDependencies": {
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
命令行輸入
npm i
指令執(zhí)行后將在項(xiàng)目根目錄生成包含插件的node_modules文件夾
(之后需要任何插件哥桥，同樣只需在package.json中配置瘤泪，通過 npm i 指令即可一次性安裝顽分。)
3.創(chuàng)建app文件目錄
app文件用于存放原始數(shù)據(jù)和js模塊
4.創(chuàng)建public文件目錄
public文件夾用于存放供瀏覽器讀取的文件确虱。包括使用webpack打包生成的js文件及一個(gè)index.html文件
5.打包文件
配置webpack.config文件
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名(若無改文件,將自動(dòng)在path目錄下創(chuàng)建一個(gè))
}
}
打包文件至指定目錄
npm start
此時(shí)可通過public目錄下的index.html查看運(yùn)行效果
6.創(chuàng)建服務(wù)器以在端口中查看運(yùn)行效果
修改package.json即可,詳見資料
啟動(dòng)服務(wù)器
npm run server
完整開發(fā)環(huán)境文件目錄結(jié)構(gòu)
關(guān)于 -g
命令中，全局安裝（global）和本地安裝（local）方式的區(qū)別為帶參數(shù)-g和不帶參數(shù)-g吩蔑。
具體區(qū)別：
npm install moduleName 钮热，則是將模塊下載到當(dāng)前命令行所在目錄。
npm install moduleName -g 烛芬，模塊將被下載安裝到全局目錄中隧期，即Node的安裝目錄下的node_modules下
