react.js使用webpack搭配環(huán)境的入門教程
本文介紹了react.js使用webpack搭配環(huán)境的入門教程,分享給大家,也給自己做個(gè)筆記
如果你想直接上手開發(fā),而跳過(guò)這些搭配環(huán)境的繁瑣過(guò)程,推薦你使用官方的create-react-app命令
npm install -g create-react-app //安裝create-react-app腳手架 npm為node.js的包管理工具,請(qǐng)確保你已經(jīng)安裝了node.js create-react-app my-app //使用create-react-app創(chuàng)建,my-app為項(xiàng)目名稱 cd my-app/ //進(jìn)入my-app目錄 npm start //運(yùn)行項(xiàng)目
現(xiàn)在打開 http://localhost:3000/ 就能看到初始界面
我不大愿意使用官方自帶這個(gè)腳手架,是因?yàn)樗膚ebpack配置太復(fù)雜,我比較愚鈍看不大懂,還望有大神能研究透徹分享一下。
要如何create-react-app內(nèi)部的webpack配置文件解壓出來(lái)?
npm run eject
源代碼
每次看教程我都喜歡先把項(xiàng)目跑起來(lái),然后再一句一句代碼地去了解。如果你也是:
git clone https://github.com/lingjiawen/HelloReact.git cd HelloReact/ npm install npm run dev
一、創(chuàng)建項(xiàng)目結(jié)構(gòu)
新建一個(gè)文件夾,命名為HelloReact
順口提一下,我用的IDE是Sublime
在該文件夾內(nèi)這樣組織你的項(xiàng)目結(jié)構(gòu):
|--app //項(xiàng)目組件 |--components //組件結(jié)構(gòu) |---Hello.jsx |--main.js //入口文件 |--build //項(xiàng)目build文件 |--index.html //索引html |--.babelrc //babel轉(zhuǎn)碼工具配置文件 |--package.json //npm說(shuō)明文件,可以理解為包管理文件 |--webpack.config.js //webpack配置文件
在build/index.html中拷貝以下代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ReactDemo1</title> </head> <body> <!--插入React組件的位置--> <div id="main"> </div> <script src="bundle.js"></script> </body> </html>
React代碼插入到main中,而bundle.js是webpack打包生成的js文件,在這里你可以先幫它記下來(lái)下文看到了再回來(lái)一看就清楚了。
在package.json中輸入以下代碼:
注意,所有的注釋都不要輸入進(jìn)去!
//package.json { "name": "HelloReact", //項(xiàng)目名字 "version": "1.0.0", //項(xiàng)目版本 "main": "webpack.config.js", "scripts": { "start": "webpack", //npm start的配置 }, "author": "", //作者 "license": "ISC", "devDependencies": { //調(diào)試依賴項(xiàng) "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-react-transform": "^2.0.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "react": "^15.6.1", "react-dom": "^15.6.1", "react-transform-hmr": "^1.0.4", "webpack": "^3.4.1", }, "description": "", "dependencies": { //項(xiàng)目依賴項(xiàng) } }
在webpack配置文件webpack.config.js中輸入以下代碼:
var webpack = require('webpack');//引入Webpack模塊,注意這里只能使用ES5語(yǔ)法引入 module.exports = { entry: __dirname + "/app/main.js",//唯一入口文件 output: { path: __dirname + "/build",//打包后的bundle.js文件存放的地方 filename: "bundle.js" //打包后的文件名 }, module: { //loaders加載器 loaders: [ { test: /\.(js|jsx)$/, //匹配loaders所處理的文件的擴(kuò)展名的正則,如jsx和js文件 loader: 'babel-loader' //loader的名稱 } ] }, plugins: [ new webpack.HotModuleReplacementPlugin()//熱模塊替換插件 ] };
.babelrc是babel轉(zhuǎn)碼器的配置文件,它能將es6代碼轉(zhuǎn)換成es5代碼,還支持react語(yǔ)法轉(zhuǎn)換
在.babelrc中輸入以下代碼:
//.babelrc { "presets": [ "react", "es2015" ], "env": { "development": { "plugins": [ [ "react-transform", { "transforms": [ { "transform": "react-transform-hmr", "imports": [ "react" ], "locals": [ "module" ] } ] } ] ] } } }
在app/components/Hello.jsx中輸入以下代碼:
import React from 'react'; //引入react //創(chuàng)建組件類:名字首字母必須大寫 class Hello extends React.Component { render() { return ( <div>Hello World!</div> ) } } //導(dǎo)出組件 export default Hello;
React 使用 JSX 來(lái)替代常規(guī)的 JavaScript。
JSX 是一個(gè)看起來(lái)很像 XML 的 JavaScript 語(yǔ)法擴(kuò)展。
它看起來(lái)是在Javascript代碼里直接寫XML的語(yǔ)法,而實(shí)質(zhì)上是一個(gè)語(yǔ)法糖,每一個(gè)XML標(biāo)簽都會(huì)被JSX轉(zhuǎn)換工具(如babel)轉(zhuǎn)換成純Javascript代碼
在app/main.js中輸入以下代碼:
//main.js import React from 'react'; import ReactDOM from 'react-dom'; import Hello from './components/Hello.jsx'; ReactDOM.render( <Hello />, document.getElementById('main') );
二、運(yùn)行項(xiàng)目
打開命令行,cd到HelloReact文件夾目錄,運(yùn)行
npm install
該命令會(huì)安裝package.json的所有依賴文件,安裝完成后,運(yùn)行:
npm start
npm start命令是剛才你在package.json中定義的:
"scripts": { "start": "webpack", }
注:只有start可以省略run,其他都需要加上run,如 npm run dev;
你會(huì)發(fā)現(xiàn)build.js中多了bundle.js文件,這是你在webpack.config.js中定義的打包文件:
var webpack = require('webpack');//引入Webpack模塊,注意這里只能使用ES5語(yǔ)法引入 module.exports = { …… output: { path: __dirname + "/build",//打包后的bundle.js文件存放的地方 filename: "bundle.js" //打包后的文件名 }, …… };
打開該目錄下的index.html,看到以下輸出運(yùn)行成功:
三、添加熱替換模塊
項(xiàng)目已經(jīng)可以運(yùn)行了,但是每次輸完代碼都要npm start進(jìn)行打包,想想都沒辦法忍受,這就需要用到webpack-dev-server熱替換模塊,所見即所得
其實(shí)在前面的代碼中,為了避免麻煩,我已經(jīng)偷偷將熱替換模塊的部分配置加了進(jìn)去
webpack.config.js中的
…… plugins: [ new webpack.HotModuleReplacementPlugin()//熱模塊替換插件 ] ……
package.json中的
"devDependencies": { …… "babel-plugin-react-transform": "^2.0.2", "react-transform-hmr": "^1.0.4", "webpack-dev-server": "^2.6.1" …… }
還有.babelrc中的
"env": { "development": { "plugins": [ [ "react-transform", { "transforms": [ { "transform": "react-transform-hmr", "imports": [ "react" ], "locals": [ "module" ] } ] } ] ] } }
你可以將這些代碼刪除,發(fā)現(xiàn)也是可以正常打包并運(yùn)行。因?yàn)橹安]有用到熱加載
那我現(xiàn)在想用,要怎么用呢?
很簡(jiǎn)單,在package.json中加入:
…… "scripts": { "start": "webpack", "dev": "webpack-dev-server" } ……
好,現(xiàn)在運(yùn)行一下npm run dev
打開localhost:8080
咦,怎么是列出文件列表,哦哦哦,原來(lái)是沒有配置默認(rèn)路徑;
…… "scripts": { "start": "webpack", "dev": "webpack-dev-server --contentBase='./build' " } ……
重新運(yùn)行npm run dev:
修改app/components/Hello.jsx
保存后再回到頁(yè)面,發(fā)現(xiàn)頁(yè)面已經(jīng)自動(dòng)更新:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
react?路由權(quán)限動(dòng)態(tài)菜單方案配置react-router-auth-plus
這篇文章主要為大家介紹了react路由權(quán)限動(dòng)態(tài)菜單方案react-router-auth-plus傻瓜式配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08react實(shí)現(xiàn)菜單權(quán)限控制的方法
本篇文章主要介紹了react實(shí)現(xiàn)菜單權(quán)限控制的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12關(guān)于react hook useState連續(xù)更新對(duì)象的問(wèn)題
這篇文章主要介紹了關(guān)于react hook useState連續(xù)更新對(duì)象的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03React Native之prop-types進(jìn)行屬性確認(rèn)詳解
本篇文章主要介紹了React Native之prop-types進(jìn)行屬性確認(rèn)詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12React Router 中實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由的示例
React Router 是一個(gè)非常強(qiáng)大和靈活的路由庫(kù),它為 React 應(yīng)用程序提供了豐富的導(dǎo)航和 URL 管理功能,能夠幫助我們構(gòu)建復(fù)雜的單頁(yè)應(yīng)用和多頁(yè)應(yīng)用,這篇文章主要介紹了React Router 中如何實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由,需要的朋友可以參考下2023-05-05React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題
這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12在React中使用React.createRef:更優(yōu)雅的DOM引用方式
React提供了多種方式來(lái)引用DOM元素,其中React.createRef()是一種更為現(xiàn)代、更優(yōu)雅的方式,在這篇文章中,我們將深入了解React.createRef()的應(yīng)用,以及它為開發(fā)者帶來(lái)的便利,感興趣的朋友一起看看吧2024-01-01React和Vue實(shí)現(xiàn)文件下載進(jìn)度條
本文主要介紹了React和Vue實(shí)現(xiàn)文件下載進(jìn)度條,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04ReactDOM.render在react源碼中執(zhí)行原理
這篇文章主要為大家介紹了ReactDOM.render在react源碼中執(zhí)行原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12