一、使用NPM配置React开发环境
1、初始化react项目
进入一个命名好的空的文件夹下，在该文件夹下
运行npm init
此时会需要填写一些信息，也可以直接回车不填
{
"name": "05-01", //项目名称
"version": "1.0.0", //版本
"description": "", //描述
"entry point": (index.js) index.js //入口文件，一般命名为index
"text command":
"keywords"://关键字
"author"://作者
},
回车之后，cmd会返回确认信息，询问你是否ok，yes回答后得到如下
{
"name": "05-01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
通过npm init 会生成一个packge.js文件，所有安装包的版本信息会汇聚于此。（例子见文末附录）
【注意】：
拿到别人react项目，因为每个人使用的包版本不同，所以要依据对方的packge.js内容配置环境，只需要运行npm install就可以下载相对应的包，完成环境配置。
如果要改动包的版本，运行npm install 包@版本号 --save
二、项目依赖包安装
安装清单
（npm install --save）
1、react
2、react-dom
3、babelify
4、babel-preset-react
(npm install --save react react-dom babelify babel-present-react)
5、babel-preset-es2015
6、babel-loader
7、webpack (--save -g 需要全局及局域安装)
8、webpack-dev-server (--save -g 需要全局及局域安装)
（npm install --save/-g webpack）
（npm install --save/-g webpack-dev-server）
安装第一个包后，就会发现文件中多了一个node_modules文件
node_modules
所有的包都会放在node_modules文件夹中，这就是用npm安装包的好处，方便对包的管理
1、安装react DOM
在cmd下进入文件目录，输入npm install --save react react-dom babel-preset-react
2、安装ES2015/ES6
继续在cmd命令行中输入，npm install babel-preset-es2015 --save "--save"的作用是为了把配置保存到配置文件中去
3、批量导入安装包
1、直接在pakage.json里直接输入安装包名和对应版本
2、删除node_modules文件夹
3、运行命令npm install
4、上传git的时候可以把node_modules文件夹删除，有package.js就可以，运行之前安装所有包npm install
三、Webpack热加载配置
1、安装
全局（-g）以及项目内（--save）安装webpack、webpack-dev-server
2、新建及配置webpack.config.js
在项目中新建webpack.config.js文件，注意文件名是固定的（webpack.config.js）。
【webpack.config.js模板文件】
var debug = process.env.NODE_ENV !== "production"; //引用相关webpack包
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname),
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/js/root.js", //设置人口文件
module: { //模板
loaders: [
{
test: /\.js?$/, //通过正则表达式解析所有JS文件
exclude: /(node_modules)/, //会跳过mode_modules的文件
loader: 'babel-loader', //用babel-loader来解释
query: {
presets: ['react', 'es2015'], //加载react和es2015的包
plugins: ['react-html-attrs'] //添加组件的插件配置
}
},
//下面是使用 ant-design 的配置文件
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
output: {
//node.js中__dirname变量获取当前模块文件所在目录的完整绝对位置
path: __dirname, //输出文件的绝对路径
filename: "./src/bundle.js" //用于输出文件的文件名
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })
]
};
3、运行webpack打包
3.1在命令行运行 webpack 就会创建 bundle.js。bundle.js就是webpack将项目中所有的脚本、样式、图片统一打包输出。调用时，只需要在html文件中引入bundle.js就可以，省去繁琐的引入。
如果输入webpack-watch就会自动关注bundle.js的变化，实现更新。
3.2.1、在cmd中输入命令webpack --watch让webpack时刻关注代码，有变动立马更新，但是需要手动刷新页面才会显示
3.2.2、项目热加载
如果需要页面实现自动刷新，要在命令行中输入webpack-dev-server --inline --hot，会返回Project is running at http://localhost:8080/,将http://localhost:8080/地址输入网页，代码保存之后就会自动刷新页面
四、创建index.html文件
在webpack.config.js中，我们规定了入口文件为index.js,所以现在要创建index.js文件，放在js文件夹下，最后所有组件都将在入口文件下组装。（相当于app.js）
创建index.html文件，在文件中引入bundle.js文件以及css文件
注意：虽然此时js相关代码是写在index.js中，但是运行webpack打包之后，index.js相关代码就会包含在bundle.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="./src/css/pc.css">
<link rel="stylesheet" href="./src/css/mobile.css">
</head>
<body>
<div id="mainContainer"></div>
<script src="./src/bundle.js"></script>
</body>
</html>
【附录】
【package.json】
{
"name": "news",
"version": "1.0.0",
"description": "",
"main": "root.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "^3.0.0",
"babel-loader": "^7.1.4",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"css-loader": "^0.25.0",
"fetch": "^1.1.0",
"json-loader": "^0.5.4",
"prop-types": "^15.6.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-mixin": "^2.0.2",
"react-responsive": "^1.2.1",
"react-router": "^2.8.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
},
"devDependencies": {
"babel-plugin-import": "^1.0.1",
"babel-preset-stage-0": "^6.24.1",
"webpack": "^3.0.0"
}
}
网友评论