小白的ReactApp項目構(gòu)建流程【環(huán)境搭建與HelloWorld】
- 開發(fā)環(huán)境：win10
- 開發(fā)軟件：webstorm
創(chuàng)建新項目（空文件夾）
-
當(dāng)前目錄下（以后以
home表示）執(zhí)行cmdwebstorm上直接alt+F12即可彈出控制臺 -
$npm init項目初始化削解，文件夾下新增package.json文件 -
$npm i webpack安裝webpack -
$npm i react安裝react -
$npm i react-dom -S其中 -S就是--save的簡寫，就行npm默認(rèn)一個start的字段，你可以不必輸入npm run start 而只需輸入npm start寸爆，這兩個效果是一樣的供常。 -D就是--save-dev 這樣安裝的包的名稱及版本號就會存在package.json的devDependencies這個里面筷屡， 而--save會將包的名稱及版本號放在dependencies里面饲化。 -
在
home下豪直，新建build文件夾雇逞，同時內(nèi)建webpack.config.js放置配置文件荤懂，webpack的config文件，以及一些腳本文件 -
在
home下塘砸，新建client文件夾节仿，同時內(nèi)建app.js以及App.jsx放置客戶端文件，app.js作為應(yīng)用入口掉蔬，App.jsx用于聲明整個應(yīng)用頁面上的內(nèi)容 -
修改
webpack.config.js以及package.json,給app.js添加測試代碼[package.json] ->start { "name": "react-learn", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack --config build/webpack.config.js" //scripts-build： 指定webpack的config文件廊宪，實際執(zhí)行時需要刪除此代碼，否則會報錯 package.json mustbe actual JSON, not just JavaScript.因為json不識別注釋 }, "author": "zc", "license": "ISC", "dependencies": { "react": "^16.2.0", "webpack": "^3.10.0" } } ->End [webpack.config.json] ->start const path = require('path'); module.exports = { entry: { //資源文件的路徑女轿，打包時的入口 app: path.join(__dirname,'../client/app.js') }, output: { //輸出的目錄 filename: "[name].[hash].js", //[]代表變量,hash用于刷新緩存 path: path.join(__dirname,'../dist'), //輸出文件存放的路徑 publicPath: '/public' //靜態(tài)資源文件引用的路徑的前綴 --/public/app.hash.js,用于區(qū)分靜態(tài)資源/API請求,還可以直接修改為cdn路徑 } } -> End [app.js] ->start alert(123); ->end -
$npm run build打包完成箭启，文件結(jié)構(gòu)內(nèi)出現(xiàn)dist目錄并且生成項目文件 -
編寫App.jsx
import React from 'react' export default class App extends React.Component{ render(){ return( <div>Hello World </div> ) } } //tips: 1：如果未出現(xiàn)智能提示， Settings->Languages&Frameworks->Node.js and NPM->Coding Assistance->Enable 即可 2：jsx內(nèi)快速書寫html標(biāo)簽：tab鍵 -
$npm i react-dom -S用于將react組件渲染到dom中 -
修改
app.js,用于將react組件渲染到dom中import ReactDOM from 'react-dom' import App from './App.jsx' ReactDOM.render(App,document.body) //將App掛載在document.body中蛉迹，因為此時并沒有模板傅寡，只有body可以使用，官方推薦在body中創(chuàng)建一個默認(rèn) 節(jié)點作為主dom -
修改
webpack.config.js與output同級添加webpack解析模塊 module: { //添加模塊婿禽，讓webpack識別jsx代碼(非標(biāo)準(zhǔn)js語法) rules: [ { test:/.jsx$/, //正則表達(dá)式赏僧，react項目設(shè)置為所有的符合test正則的文件 loader: 'babel-loader' //識別符合test正則的文件的loader，babel是編譯各種最新js語法的工具扭倾，react指定工具 } ] } -
$npm i babel-loader -D開發(fā)的工具使用 -D加載提供給開發(fā)者的develope版本模塊 -
$npm i babel-core-Dbabel-loader只是webpack的插件淀零，其核心還是babel-core，需要安裝 -
$npm run build此時運行會報錯誤膛壹，因為babel默認(rèn)直接編譯es6語法而不能支持jsx,需要配置babel編譯模式-> -
root目錄下新建.babelrc文件并編輯{ "presets": [ //代表babel支持的語法,因為語法太多驾中，所以babel-core中并未包含es2015 ["es2015",{"loose":true}],//松散類型唉堪，非嚴(yán)格類型 "react" //babel只編譯有react選項的代碼 ] } $npm i babel-preset-es2015 babel-preset-es2015-loose babel-preset-react -D-
刪除老dist目錄后 ->
npm run build新生成的dist目錄中的[name].[hash].js文件會非常大，因為react源碼會被編譯其中肩民， 其中最底下的代碼就是開發(fā)者自己編寫的代碼 -
$npm i html-webpack-plugin -D想要在瀏覽器中打開自己編譯好的軟件唠亚，需要安裝此插件 本人安裝成了 webpack-html-plugin 233 -
引用
html-webpack-plugin【最簡單的引用方式】在webpack.config.js頂部添加代碼 const HTMLPlugin=require('html-webpack-plugin') 同時添加與module同級的選項 plugins:[ new HTMLPlugin();//webpack編譯時生成HTML頁面，并且把所有的entry選項都注入到HTML頁面中持痰， 并且filename,path和publicPath都是基于output選項進(jìn)行拼接而成 ] -
$npm run build可以看到在dist目錄中出現(xiàn)webpack編譯成的HTML頁面 因為此時并未起服務(wù)器/路徑映射,因此此時路徑將會出現(xiàn)問題,無法訪問資源文件 刪除dist目錄,將webpack.config.js->output->publicPath置為空,使webpack使用絕對路徑編譯文件 重新 build,用HTML進(jìn)入編譯好的HTML文件 會發(fā)現(xiàn)仍然沒有內(nèi)容,F12發(fā)現(xiàn)報錯 --報錯1:不能直接將react組件掛載在document.body上,但這并不是影響運行的錯誤 --報錯2:ReactDOM.render時,也需要用jsx語法編寫 其實,jsx文件使用的js語法是es6的語法,而在app.js中含有jsx代碼,也就是說app.js代碼中實際使用的是 ES6+jsx代碼,之前只是對jsx用babel編譯成ES2015代碼,而ES6文件并未做此處理,因此需要webpack.config. js->rules修改test,用于將ES6語法編譯成ES2015,將現(xiàn)有的test /.jsx$/ -> /.(jsx|js)$/后,再執(zhí)行 [npm run build],此時會報錯,原因是在[root -> node_modules]下的文件在npm init加載時已經(jīng)經(jīng)過編譯, 所以此文件夾下的js代碼需要過濾,那么在rules中新添加test用于[過濾非node_modules]文件夾下的js文件 -
修改
webpack.config.js->npm run build{ test:/.js$/, loader: 'babel-loader', exclude:[ path.join(__dirname,'../node_modules') ] } -
打開HTML,報錯,顯示React未定義
貼上錯誤代碼 _reactDom2.default.render(React.createElement(_App2.default, null), document.body); 在app.js中,引入了jsx標(biāo)簽,必須要引入React,因為jsx代碼最終翻譯出來的標(biāo)簽都會用到React -
在
app.js中引入Reactimport React require('react') -
$npm run build進(jìn)入HTML,OJBK,順利顯示Hello World
小結(jié):
后續(xù)再寫
