Step 1
安装 NodeJS
Step 2
假定根目录在F://React//ReactApp
打开cmd,依次输入一下命令:
1、F:
3、cd F://React//ReactApp
4、npm init
5、输入下面的信息 :
{
"name": "package.json",
"version": "1.0.0",
"description": "reactapp",
"main": "index.js",
"scripts": {
"test": "test"
},
"keywords": [
"reactapp"
],
"author": "ming",
"license": "ISC"
}
6、最后输入 y 确认,此时在目录里面会生成一个文件:package.json
Step 3
我们需要手动在根目录创建几个文件夹和文件,如下图:
其中,index.js先留空白,index.html 代码如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Step 4
1、在cmd中运行命令:npm install react react-dom
2、打开index.js,输入以下代码:
import React from 'react'
import reactDom from 'react-dom'
import ReactDom from 'react-dom'
reactDom.render(
<h1>react app</h1>,
document.getElementById('app')
)
Step 5
1、在cmd中运行命令:npm install -g webpack webpack-cli
2、在config文件夹中创建webpack.config.js,添加如下代码:
const path = require('path')
const publicPath='../build/'
const rootpath=path.resolve(__dirname,publicPath)
module.exports={
entry:{
reactapp:'./index.js'
},
output:{
filename:'[name].js',
path:rootpath,
publicPath:publicPath
},
mode:'development',
module:{
rules:[
{
test:/\.(js)$/,
exclude:/node_modules/,
use:{
loader:'babel-loader'
}
},
{
test:/\.css$/,
exclude:/node_modules/,
use:['style-loader','css-loader']
}
]
},
resolve:{
modules:['node_modules'],
extensions:['.js','.json']
}
}
Step 6
1、安装babel,在cmd中运行命令:npm install --save-dev babel-loader @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/plugin-transform-react-jsx
2、在根目录下创建babel.config.json,添加如下代码:
{
"presets": [
[
"@babel/preset-env",
{
"targets":{
"browsers":[
"> 1%",
"last 2 versions"
]
},
"useBuiltIns":"usage",
"corejs":3,
"modules":"auto"
},
"@babel/preset-react"
]
],
"plugins": [
"@babel/plugin-transform-react-jsx"
]
}
Step 7
到此时,我们已经完成了整个项目的简单搭建,在cmd中运行命令:npm run build,
这时在项目根目录会生产一个build文件夹,里面有个reactapp.js,此时,我们代开index.html,在里面应用这个reactapp.js包即可,如下图所示:
此时,我们在browser中打开预览index.html,如下所示:(此处用live server预览,也可以直接双击打开预览)
Step 8
我不想生产的reactapp.js是手动inject到index.html里面的,我想自动inject到html
这时,我们要安装html-webpack-plugin
1、在cmd中npm install html-webpack-plugin
2、修改webpack.config.js
const path = require('path')
const publicPath='../build/'
const rootpath=path.resolve(__dirname,publicPath)
const HtmlWebpackPlugin= require('html-webpack-plugin')
module.exports={
entry:{
reactapp:'./index.js'
},
output:{
filename:'[name].js',
path:rootpath,
publicPath:publicPath
},
mode:'development',
module:{
rules:[
{
test:/\.(js)$/,
exclude:/node_modules/,
use:{
loader:'babel-loader'
}
},
{
test:/\.css$/,
exclude:/node_modules/,
use:['style-loader','css-loader']
}
]
},
resolve:{
modules:['node_modules'],
extensions:['.js','.json']
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
template:'./public/index.html',
inject:true
})
]
}
3、这时,再次运行npm run build,我们会发现,在build folder里,reactapp.js会自动注入到了index.html里面。
此时在browser里面预览,一样得到之前的预览效果。
总结:此时,这个项目基本框架已完成了,如果你看过vue或者是react 的cli创建出来的项目,基本也是这样创建出来的,当然,上面的步骤只是非常简单的创建一个基本的项目框架,并不能跟vue或react cli 框架模板相提并论,这里只是演示在不适用vue或者react cli创建模板时,我们如何自己手动创建一个工程化web项目。
后面我会继续往这个项目里面集成webpack-dev-server,sass/css,基于class的组件编程,异步加载bundle,Development/Production Environments,proxy request api(dev),js/css分包(webpack optimization)
再后面我想写一下自己怎么去实现一个route (vue/react的route)。