兩種配置react項(xiàng)目運(yùn)行環(huán)境的方法

第一種方法，一步步配置項(xiàng)目的運(yùn)行環(huán)境：
1）下載node，在官方網(wǎng)站可以下載，安裝步驟不難，差不多一步步意
點(diǎn)next就行；
2）運(yùn)行cmd 輸入node -v npm -v兩行命令檢查是否安裝成功；
3）接下來在cmd下輸入npm install -g webpack (最好使用cnpm命令進(jìn)行下載，快一點(diǎn))，全局安裝webpack打包軟件；
4）然后輸入npm install -g webpack-cli 全局安裝webpack-cli腳手架；
5）接下來安裝webpack-dev-server,介紹一下這個(gè)是什么webpack-dev-server是一個(gè)小型的Node.js Express服務(wù)器，注意知識(shí)點(diǎn)：“服務(wù)器，可以將我們打包好的工程項(xiàng)目運(yùn)行在瀏覽器上，在終端輸入
npm install webpack-dev-server就可以完成下載；
6）安裝html-webpack-plugin插件，加快瀏覽器的訪問速度，使用html-webpack-plugin插件來啟動(dòng)頁面 可將html頁面放入內(nèi)存 以提升頁面的加載速度 ,并且還能自動(dòng)設(shè)置index.html頁面中JS文件引入的路徑,(安裝好插件后得在webpack-config-js中進(jìn)行配置）

var htmlWebpackPlugin = require('html-webpack-plugin')const path = require('path') module.exports = {entry: './src/script/main.js',output: {filename: 'js/bundle.js',path: path.resolve(__dirname, 'dist')},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'head'})] }

根據(jù)自己項(xiàng)目中的文件路徑來配置；
7）上面安裝的都是關(guān)于項(xiàng)目的，方便我們對(duì)項(xiàng)目的操作。接下來將要安裝我們編寫項(xiàng)目的框架react。
打開終端輸入npm install react 安裝react組件；
然后輸入npm install react-dom 安裝react虛擬dom；

通過上面的步驟已經(jīng)完成了初步react項(xiàng)目環(huán)境的搭建。在終端輸入npm run dev就可以看見自己的項(xiàng)目運(yùn)行效果圖。如果后續(xù)項(xiàng)目還有什么功能需求，可以通過npm進(jìn)行安裝。

注釋：方法只講了大致的步驟，有一些細(xì)小的代碼編寫就沒有細(xì)說！

第二種方法，這種方法就是在第一種方法上面的濃縮，封裝。
1）第一步還是一樣安裝node 并檢查是否安裝成功，這里就不細(xì)說了；
2）打開cmd全局安裝react項(xiàng)目搭建腳手架；輸入npm install -g creacte-react-app命令（等待時(shí)間可能有點(diǎn)久）；
3）然后在cmd中輸入creacte-react-app 項(xiàng)目名 （注意項(xiàng)目名的命名規(guī)范）
4）在編譯器終端中輸入npm start運(yùn)行程序即可；

參考文獻(xiàn)：用腳手架搭建react項(xiàng)目

總結(jié)：第一種方法雖然步驟繁多，但是可以一步步讓我們理解項(xiàng)目環(huán)境的搭建過程，便于理解；第二種方法，優(yōu)點(diǎn)在于便捷，一兩步就可以解決，但是對(duì)于初學(xué)者來說不能理解所搭建的項(xiàng)目的構(gòu)成。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的配置React项目的运行环境的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。