这次搭建分为两部分:一部分是前期必要配置,一部分是开发React代码。
【基于Webpack的React Hello World项目】
1.前期必要配置
(1)首先要确保读者的开发设备上已经安装过Node.js,新建一个项目:
mkdir react-hello-world
cd react-hello-world
npm init -y
(2)项目中使用的是Webpack 4.x,在项目根目录下执行:
npm i webpack webpack-cli -D
注意:上面命令代码中npm install module_name —D 即 npm intsll module_name —save-dev。表示写入package.json的devDependencies,devDependencies里面的插件用于开发环境,不用于生产环境。npm install module_name —S即npm intsll module_name —save。dependencies是需要发布到生产环境的。
(3)安装完Webpack,需要有一个配置文件让Webpack知道要做什么事,这个文件取名为webpack.config.js。
touch webpack.config.js
然后配置内容如下:
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'src');
var BUILD_DIR = path.resolve(__dirname, 'build');
var config = {
entry: APP_DIR + '/index.jsx', // 入口
output: {
path: BUILD_DIR, // 出口路径
filename: 'bundle.js' // 出口文件名
}
};
module.exports = config;
这是Webpack使用中最简单的配置,只包含了打包的入口和出口。APP_DIR表示当前项目的入口路径,BUILD_DIR表示当前项目打包后的输出路径。
(4)上面配置的入口需要新建一个应用的入口文件./src/index.jsx,我们让其打印简单的一句:
console.log('Hello World’);
(5)用终端在根目录下执行:
./node_modules/.bin/webpack -d
上面的命令在开发环境运行之后,会在根目录下生成一个新的build文件夹,里面包含了Webpack打包的bundle.js文件。
(6)接下来创建index.html,用于在浏览器执行bundle.js :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<div id=“app”></div>
<!--bundle.js是Webpack打包后生成的文件-->
<script src="build/bundle.js" type="text/javascript"></script>
</body>
</html>
现在读者可以在浏览器中打开index.html文件,在控制台能看到./src/index.jsx打印的内容:Hello World 。
(7)为了提高效率和使用最新的ES语法,通常使用JSX和ES 6来进行开发。但JSX和ES6语法在浏览器中还没有被完全支持,所以需要在Webpack中配置相应的loader模块来编译它们。只有这样,打包出来的bundle.js文件才能被浏览器识别和运行。
接下来安装Babel:
npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-react
注意:babel-core是调用Babel的API进行转码的包;babel-loader是执行转义的核心包;babel-preset-env是一个新的preset,可以根据配置的目标运行环境自动启用需要的Babel插件;babel-preset-react用于转义React的JSX语法。
(8)在webpack.config.js中配置loader:
var webpack = require("webpack");
var path = require("path");
var BUILD_DIR = path.resolve(__dirname, "build"); // 构建路径
var APP_DIR = path.resolve(__dirname, "src"); // 项目路径
var config = {
entry: APP_DIR + "/index.jsx", // 项目入口
output: {
path: BUILD_DIR, // 输出路由
filename: "bundle.js" // 输出文件命名
},
module: {
rules: [
{
test: /\.(js|jsx)$/, // 编译后缀为js和jsx格式文件
exclude: /node_modules/,
use: {
loader: "babel-loader" // 使用babel-loader这个loader库
}
}
]
}
};
module.exports = config;
(9)创建.babelrc文件:
touch .babelrc
配置相应内容来告诉babel-loader使用ES6和JSX插件:
{
"presets" : ["env", "react"]
}
至此为止,已经配置完开发该项目的基础工作。
《海贼王》中罗杰说,每个人都有自己出场的机会!在将来,React可能会在前端历史的浪潮中被人遗忘,但今天,React的设计思想影响了无数的开发者,当下正是属于它的时代!!!!!