React + webpack 環(huán)境配置的方法步驟
本文介紹了React + webpack 環(huán)境配置的方法步驟，分享給大家，具體如下：
安裝配置Babel
babel-preset-es2015 ES6語(yǔ)法包，使代碼可以隨意地使用ES6的新特性。
babel-preset-react React語(yǔ)法包，專門用于React的優(yōu)化，在代碼中可以使用React ES6 classes的寫法，同時(shí)直接支持JSX語(yǔ)法格式
安裝Babel loader
// 安裝babel-core核心模塊和babel-loader npm install babel-core babel-loader --save-dev // 安裝ES6 和 React 支持 npm install babel-preset-es2015 babel-preset-react --save-dev
配置 .babelrc
安裝完Babel和它的插件，配置一下它的規(guī)則，在根目錄下新建一個(gè).babelrc空文件：
// 告訴Babel，編譯JavaScript代碼的時(shí)候要用這兩個(gè)presets編譯
{
"preset": ["es2015", "react”]
}
安裝配置ESLint
安裝ESLint loader
為webpack添加這個(gè)preLoaders（在loader處理資源之前，先用preLoaders進(jìn)行處理，代碼檢查在代碼轉(zhuǎn)換之前進(jìn)行）
npm install eslint eslint-loader --save-dev
這里使用Airbnb開發(fā)配置合集eslint-config-airbnb，這個(gè)配置合集里面還包括以下3個(gè)插件：
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev npm install eslint-config-eslint
配置 .eslintrc
在根目錄下新建一個(gè).eslintrc的空文件：
{
"extends": "airbnb",
"rules": {
"comma-dangle": ["error", "never"]
}
}
安裝配置webpack
配置webpack之前，先安裝一個(gè)webpack的插件——html-webpack-plugin，它可以幫助我們自動(dòng)生成HTML頁(yè)面，并且引入正確的JavaScript文件依賴：
npm install html-webpack-plugin —save-dev
在項(xiàng)根目錄下新建一個(gè)webpack.config.js文件:
let path = require('path')
let webpack = require('webpack')
let HtmlwebpackPlugin = require('html-webpack-plugin')
// 一些常用路徑
const ROOT_PATH = path.resolve(__dirname)
const APP_PATH = path.resolve(ROOT_PATH, 'app')
const BUILD_PATH = path.resolve(ROOT_PATH, 'build')
module.exports = {
entry: {
app: path.resolve(APP_PATH, 'index.jsx')
},
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
// 開啟 dev source map
devtool: 'eval-source-map',
// 開啟 webpack dev server
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
modules: {
// 配置preLoaders, 將eslint 添加進(jìn)去
preLoaders: [
{
test: /\.jsx?$/,
loaders: ['eslint'],
include: APP_PATH
}
],
// 配置loader，將Babel添加進(jìn)去
loaders: [
{
test: /\.jsx?$/,
loaders: ['babel'],
include: APP_PATH
}
]
},
// 配置 plugin
plugins: [
new HtmlwebpackPlugin({
title: 'my first react webpack'
})
],
resolve: {
extensions: ['', '.js', '.jsx']
// 在js中import加載jsx擴(kuò)展名的腳本
}
}
添加組件熱加載（HMR）功能
npm install babel-preset-react-hrme --save-dev
這個(gè)preset里面其實(shí)包括兩方面：
- react-transform-hmr用來實(shí)現(xiàn)熱加載
- react-transform-catch-errors用來捕獲render里面的方法，并且直接展示在界面上
配置一下 .babelrc：
{
"preset": ["es2015", "react"],
"env": {
"development": {
"presets": ["react-hrme"]
}
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React網(wǎng)絡(luò)請(qǐng)求發(fā)起方法詳細(xì)介紹
在編程開發(fā)中，網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求是必不可少的，這篇文章主要介紹了React網(wǎng)絡(luò)請(qǐng)求發(fā)起方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
眾所周知，react推出了hooks之后，很多項(xiàng)目就開始往hooks上靠攏，所以也就出現(xiàn)了class和hooks交叉使用的項(xiàng)目。這個(gè)時(shí)候使用ref需要注意一些東西2021-06-06
react簡(jiǎn)單實(shí)現(xiàn)防抖和節(jié)流
在日常開發(fā)中，我們經(jīng)常會(huì)有防抖和節(jié)流的需要，可以減小服務(wù)器端壓力，提升用戶體驗(yàn)，本文就詳細(xì)的介紹了react簡(jiǎn)單實(shí)現(xiàn)防抖和節(jié)流，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
react 可拖拽進(jìn)度條的實(shí)現(xiàn)
本文主要介紹了react 可拖拽進(jìn)度條的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
React?Native集成支付寶支付的實(shí)現(xiàn)方法
這篇文章主要介紹了React?Native集成支付寶支付的實(shí)現(xiàn)現(xiàn),ativeModules是JS代碼調(diào)用原生模塊的橋梁。所以，我們只需要在原生工程中集成支付寶和微信支付的sdk，然后使用NativeModules調(diào)用即可，需要的朋友可以參考下2022-02-02
關(guān)于hooks中useEffect()的使用總結(jié)
這篇文章主要介紹了關(guān)于hooks中useEffect()的使用總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了在react中使用vue的狀態(tài)管理的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
React中重新實(shí)現(xiàn)強(qiáng)制實(shí)施表單的流程步驟
這篇文章主要介紹了React中重新實(shí)現(xiàn)強(qiáng)制實(shí)施表單的流程步驟,就像設(shè)計(jì)人員一樣,在添加邏輯之前,您需要為不同的狀態(tài)“模擬”或創(chuàng)建“模擬”,例如,這里只是表單的視覺部分的模擬,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-05-05
React-hook-form-mui基本使用教程(入門篇)
react-hook-form-mui可以幫助開發(fā)人員更輕松地構(gòu)建表單,它結(jié)合了React?Hook?Form和Material-UI組件庫(kù),使用react-hook-form-mui,開發(fā)人員可以更快速地構(gòu)建表單,并且可以輕松地進(jìn)行表單驗(yàn)證和數(shù)據(jù)處理,本文介紹React-hook-form-mui基本使用,感興趣的朋友一起看看吧2024-02-02
使用React實(shí)現(xiàn)輪播效果組件示例代碼
React剛出來不久，組件還比較少，不像jquery那樣已經(jīng)有很多現(xiàn)成的插件了，于是自己寫了一個(gè)基于React的輪播效果組件，現(xiàn)在分享給大家，有需要的可以參考借鑒。2016-09-09