溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了React + webpack 環境配置的方法步驟，分享給大家，具體如下：
安裝配置Babel
babel-preset-es2015 ES6語法包，使代碼可以隨意地使用ES6的新特性。
babel-preset-react React語法包，專門用于React的優化，在代碼中可以使用React ES6 classes的寫法，同時直接支持JSX語法格式
安裝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和它的插件，配置一下它的規則，在根目錄下新建一個.babelrc空文件：
// 告訴Babel，編譯JavaScript代碼的時候要用這兩個presets編譯
{
"preset": ["es2015", "react”]
}
安裝配置ESLint
安裝ESLint loader
為webpack添加這個preLoaders（在loader處理資源之前，先用preLoaders進行處理，代碼檢查在代碼轉換之前進行）
npm install eslint eslint-loader --save-dev
這里使用Airbnb開發配置合集eslint-config-airbnb，這個配置合集里面還包括以下3個插件：
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev npm install eslint-config-eslint
配置 .eslintrc
在根目錄下新建一個.eslintrc的空文件：
{
"extends": "airbnb",
"rules": {
"comma-dangle": ["error", "never"]
}
}
安裝配置webpack
配置webpack之前，先安裝一個webpack的插件——html-webpack-plugin，它可以幫助我們自動生成HTML頁面，并且引入正確的JavaScript文件依賴：
npm install html-webpack-plugin —save-dev
在項根目錄下新建一個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 添加進去
preLoaders: [
{
test: /\.jsx?$/,
loaders: ['eslint'],
include: APP_PATH
}
],
// 配置loader，將Babel添加進去
loaders: [
{
test: /\.jsx?$/,
loaders: ['babel'],
include: APP_PATH
}
]
},
// 配置 plugin
plugins: [
new HtmlwebpackPlugin({
title: 'my first react webpack'
})
],
resolve: {
extensions: ['', '.js', '.jsx']
// 在js中import加載jsx擴展名的腳本
}
}
添加組件熱加載（HMR）功能
npm install babel-preset-react-hrme --save-dev
這個preset里面其實包括兩方面：
配置一下 .babelrc：
{
"preset": ["es2015", "react"],
"env": {
"development": {
"presets": ["react-hrme"]
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
