** react是目前最为流行的JS框架之一，对于新人，官方提供了create-react-app可以快速的构建你的react应用，用来写demo，学习react是个很好的选择，但是正式项目的运用上就有点不够看了。So，今天跟用webpack4, Babel7 搭建一个react应用。**
Step1: 初始化项目
创建一个新文件夹，在改文件夹目录下执行 npm init, 生成package.json
Step2: 安装React依赖
npm i react react-dom -D
Step3: 安装babel依赖
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D
-
babel-core: babel transpile ES6 code to ES5
-
babel-loader: This is a webpack helper which allows to transpile Javascript files with babel and webpack. It uses babel under the hood
-
babel/preset-env: It determines which features needs to be transformed to run within different browsers or runtime versions. This is also known as browser polyfills
-
babel/preset-react: It is used to transform all your React JSX into functions.
Step4: 安装webpack依赖
npm i webpack webpack-cli -D
Step5: 配置webpack
创建webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Step6: 安装webpack-dev-server
npm i webpack-dev-server -D
Step7: 在package.json文件中添加脚本命令
"scripts": {
"start": "webpack-dev-server --open --hot --mode development",
"build": "webpack --mode production"
}
- open: This will open the default browser and load the localhost environment running your app in the browser
- hot: It will watch all your changes, and reload the browser automatically
- mode: This can be development or production
Step8: 添加React代码
1 创建index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>React Webpack</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="root"></section>
</body>
</html>
2 创建index.js
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return <div>Hello React,Webpack 4 & Babel 7!</div>;
};
ReactDOM.render(<App />, document.querySelector("#root"));
Step9: 安装css-loader style-loader
npm i css-loader style-loader --save-dev
Step10: 配置babel规则
创建.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Step11: 启动项目
npm start
** 如果有问题或者描述不清的朋友们，请留言一起探讨，如果本文有给你们帮助，请留个star吧。**
