一、開發環境的搭建

注釋：（因為是自己的電腦開發的，所以所有的都要重新安裝）

1、安裝nodejs（js服務端的運行環境，構建工具的環境依賴）

2、npm

1）node.js的包管理工具 2）nodejs一般會以包的形式來組織各個模塊，所謂的包，就是一個或者多個實現某些功能的js代碼文件，一個項目如果要依賴或者使用某個項目的js的包，首先就需要把這些包下載下來，npm就是用來下載各種包的 3）npm init 初始化項目，會在項目的根目錄產生一個package.json的依賴包文件 4）npm install(uninstall) webapck --save-dev 安裝webpack,只用于開發環境, 5）npm install jquery --save 安裝jquery

3、webpack(模塊化管理工具)

1）全局安裝 (sudo)npm install webpack -g 2）在項目里安裝一個 npm install webpack@1.15.0 --save-dev 安裝完之后，會有一個第三方的node_modules包產生 3）查看版本號 webpack -v 4）新建webpack配置文件webpack.config 5）在項目開發之前會先下載好各種loader,和插件

4、介紹webpack在項目中的處理方式

1）webapck對腳本和樣式的處理

【】css-loader用于解析，而style-loader則將解析后的樣式嵌入js代碼。（這里把css做了一個模塊化，但是要等到js加載完之后才能加載，這里就會有一個空白樣式的時間，所以就用了extract-text-webpack-plugin插件，用來單獨打包css） 【】把css單獨打包，用<link>的形式來加載，這時就要用extract-text-webpack-plugin插件

2）webpack對Html模板的處理

【】html-loader 把html轉換為字符串模板，以便模板引擎（hogan.js）使用 【】html-webpack-plugin 為html文件中引入的外部資源如script、link，單獨打包html

3）webpack-dev-server

【】作用：是一種服務器，可以在文件改變時，自動刷新瀏覽器

【】安裝：（sudo）npm install webpack-dev-server@1.16.5 --save-dev?

【】打開使用：WEBPACK_ENV=dev webpack-dev-server --inline --port 8080 獲取開發環境localhost地址

【】配置：webpack-dev-server/client?http://localhost:8080/

4）html模板用hogan.js渲染 5）icon引用了一套字體庫，font-awesome(字體圖形)

5、Git(代碼版本控制系統)（記錄了剛開始開發的過程）

1）git項目建立(在oschina里新建一個項目，在自己的文件夾里拉取git里的代碼，刪掉，然后在自己新建一個；2、git init初始化；3、it remote add origin git@git.oschina.net:funnymall/admin-management.git ，把當前的文件夾和遠程的git.oschina地址對應起來；4、把遠程分支的代碼拉取下來；5、git status 查看狀態；6、vim gitignore gitignore的配置（git的忽略規則）;7、開發不在master分支開發，所以要新建一個分支，在把他切換到要開發的分支里git checkout -b babymmall_v1.0； ) 2）git權限配置 3）gitignore的配置（git的忽略規則） 4）配置ssk的認證 [1] ssh-keygen -t rsa -C “1821499781@qq.com” 5）常用命令 [1] [2]ls 顯示文件，ls -al顯示所有文件 [3]rm -rf XXX 刪除本地文件夾 [4]rm XXX 刪除文件 [6]mkdir XXX 新建文件夾 [7]git remote add origin git@git.oschina.net:funnymall/babymmall.git (這句話的意思是把當前的文件夾和遠程的git.oschina地址對應起來) [8]git pull origin master（把遠程分支的代碼拉取下來） [8]git checkout -b babymmall_v1.0(git checkout表示切換分支，-b參數表示還沒有，然后這句話的意思是，新建一個分支，再把它切換過去) [9]git branch 查看分支

6、分層架構的設計

?

1）大體分為邏輯層（page+view+image）、數據層(service)、工具層(util)

page{

　　css+js+srting

}

service：ajax請求

util：封裝一些工具類方法，比如調用接口的方法，驗證方法，回到主頁，獲取url參數等公用方法。

7、webpack單獨打包模塊

最后當前頁面只有引用公用類common.css和當前頁的樣式；以及公用類base.js和當前頁腳本；

8、webpack用requrie來引入模塊，module.exports輸出模塊?

轉載于:https://www.cnblogs.com/fayer/p/7295338.html

總結

以上是生活随笔為你收集整理的项目开发环境(h5+pc的开发思路是一样的)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。