写在最前
暑假想要学习 React, 发现 React 官网上的没有说明如何搭建 React 开发环境, 网上找的很多都是基于 webpack3 的, 或者直接使用脚手架, 所以趁着放假, 就稍微学了下 webpack, 开始搭建自己的 React 项目. 第一次写博客, 如有错误, 请指出, 谢谢!
说明
开发环境是 windows 10
技术栈版本
- node 10.3.0
- npm 6.1.0
- webpack 4.16.1
- react 16.4.1
- babel-core 6.26.3
- babel-loader 7.1.5
- babel-preset-env 1.7.0
- babel-preset-react 6.24.1
初始化项目
创建文件夹并进入
mkdir react-start&& cd react-start
初始化 package.json 文件
npm init -y
-y 的意思是按照默认的填写
webpack
安装 webpack
npm i webpack webpack-cli -D
-D 的意思是保存到开发依赖中
在 webpack4 中, 需要同时安装 webpack 和 webpack-cli, 因为两者在 webpack4 中分开管理了
新建 webpack 开发配置文件
- touch webpack.config.js
- webpack.config.js
- const path = require('path');
- module.exports = {
- // 入口文件
- entry: {
- app: './src/index.js'
- },
- // 输出到 dist 文件夹, 文件名字为 bundle.js
- output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname,'./dist')
- }
- }
新建 src 目录然后在里面新建 index.js 文件
mkdir src && cd src && touch index.js
在 index.js 里面输入
console.log('Hello World!');
进入 package.json 文件, 在 scripts 里面加入 "build"
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "build": "webpack"
- }
回到根目录, 在命令行里输入 npm run build
npm run build
可以看到以下内容, 表示编译成功
可以看到, 一个 webpack 命令执行了什么呢?
官网是这样解释的, 如果 webpack.config.js 存在, 则 webpack 命令将默认选择使用它.
我们也可以使用 webpack --config webpack.config.js 命令来指定配置文件
现在我们来测试一下, 在 dist 文件夹里面新建 index.html
index.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Page Title</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- </head>
- <body>
- <script src="./bundle.js"></script>
- </body>
- </html>
用浏览器打开 index.html 可以看到控制台输出了 Hello World!
到现在为止, 我们已经完成了基本的 webpack 配置了.
React
下面我们正式开始搭建 React
安装 react 和 react-dom
npm install react react-dom --save
也可以简写为:
npm i react react-dom -S
因为 react 中使用 JSX 语法, 所以我们需要 babel 来编译它
npm i babel-core babel-loader babel-preset-env babel-preset-react -D
其中 babel-core 是核心文件, babel6 推荐使用 babel-preset-env 来对 ES2015 及更高版本进行转换, babel-preset-react 能够转换 JSX 语法
在根目录下新建 babel 配置文件. babelrc
touch .babelrc
修改 webpack.config.js, 增加 babel-loader
- module: {
- rules: [
- {
- test: /\.(js|jsx)$/,
- use: 'babel-loader',
- exclude: /node_modules/
- }
- ]
- }
修改 src 文件夹里面 index.js
- import React, { Component } from 'react';
- import ReactDOM from 'react-dom';
- ReactDOM.render(
- <h1>Hello World</h1>,
- document.getElementById('root')
- )
修改 dist 文件夹里面的 index.html, 加上 < div id="root"></div>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Page Title</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- </head>
- <body>
- <div id="root"></div>
- <script src="./bundle.js"></script>
- </body>
- </html>
执行命令 npm run build, 可以看到编译成功
用浏览器打开 index.html, 可以看到
现在, 已经成功地用 webpack 编译 JSX 语法了
但是我们在开发中, 每次要编译代码时, 手动运行 npm run build 会变得很麻烦, 所以我们可以使用插件来帮助我们在代码发生变化后自动编译代码
使用 webpack 插件进行开发
安装 webpack-dev-server
npm i webpack-dev-server -D
修改 webpack.config.js, 增加 devServer
- devServer: {
- port: 3000,
- contentBase: './dist'
- }
意思是把服务器端口设为 3000, 默认目录是 dist
修改 package.json, 增加一个 script 脚本, 可以直接运行开发服务器
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "build": "webpack",
- "server": "webpack-dev-server --open"
- },
运行 npm run server
npm run server
直接修改 index.js 里面的内容, web 服务器就会自动重新加载编译后的代码
至此, 简单的 react 开发环境已经搭建完成了!
代码请看我的 github: https://github.com/Ga-hou/react-start
来源: https://www.cnblogs.com/gahou/p/9351002.html