目前React项目挺火的。自己学习了一下,总结了两种react项目构建的方法.
这两种方法的前提是你安装了node.js。
第一种是通过create-react-app,这也是官网教程中的方法。它一个无需配置的、用于快速构建开发环境的脚手架工具。
① 首先在全局安装create-react-app
npm install -g create-react-app # Window
npm install -g create-react-app # Linux
②生成react项目
生成的项目文件结构如下:
③cd到生成的项目文件夹中,npm start
第二种方法:webpack 一步步构建
①使用webpack对项目初始化,执行完后项目文件夹中会生成一个package.json文件
npm init
②安装webpack,安装成功后会在package文件中看到版本号 ,当然你也可以用cnpm安装,这样比较快一点
npm install --save-dev webpack
③配置webpack.config.js,在项目文件夹根目录中新建一个webpack.config.js,并写入下面的代码,这主要是生成入口文件和出口文件,说白了就是打包前的文件和打包后的文件,
var path =require('path');
module.exports = {
//入口文件
entry:'./app/index.js',
//出口文件
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
}
}
④新建index.html文件,并移入出口文件,
<!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>webpack-react</title>
</head>
<body>
</body>
<script src="./dist/index.js"></script>
</html>
⑤测试webpack配置
在入口文件(./app/index.js)中写入下面的代码,并进行打包测试。
function component(){
var element = document.createElement('div');
element.innerHTML = ('Hello React');
return element;
}
document.body.appendChild(component());
在package.josn的scripts属性中添加build命令
"scripts": { "build": "webpack" },
然后 npm run build 执行,打开index.html,检测一下app/index.js的结果,如果成功则能看见"hello React",
现在我们需要搭建一个开发服务器,安装webpack-dev-server,
cnpm install --save-dev webpack-dev-server
安装完成后,配置webpack.config.js文件,
devServer:{
contentBase:'./',
host:'localhost',
compress:true,
port:1717
}
并在package.json中的scripts标签中新增server指令,--open只自动启动浏览器
"server": "webpack-dev-server --open"
在终端输入npm run server,就能成功启动我们的项目,如果我需要设置自动刷新,否则我们需要每次都去run build.我们需要在出口文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。
//出口文件
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist'),
publicPath:'temp/'
}
并在index.html引入
<script src="./temp/index.js"></script>
其次我们需要安装babel,并支持es2016和React,所以要安装四个包。
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
安装成功后可以在package.josn文件中看见他们的版本号.可以到webpack.config.js里配置module,也就是配置我们常说的loader。
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loaders:"babel-loader",
query:{
presets:['es2015','react']
}
}
]
}
通过上面的一些配置,webpack基本配置完成,但是我们还需要安装react和react-dom,才为我们编写react代码服务.
cnpm install --save react react-dom
安装成功后我们需要改写app/index.js和index.html里的代码
app/index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello JSPang</div>,
document.getElementById("app")
);
index.html
在body中增加容器
<div id="app"></div>
现在可以输入npm start 启动我们的项目.预览效果