首页 > 代码库 > React环境配置
React环境配置
现在开始配置一个基础项目。
创建项目文件夹：C:\Users\Danny\Desktop\React
npm init
创建package.json文件
下面的所有安装，都是--save-dev，因为运行的时候，不需要这些依赖，只是在开发的时候需要。
cnpm install --save-dev ***
cnpm install --save-dev webpack
webpack安装完毕（当然你要之前-g也装过webpack），此时就能构建CMD程序，为一个all.js文件了。
cnpm install --save-dev babel-core
cnpm install --save-dev babel-loader
cnpm install --save-dev babel-es2015
此时先不要继续往下配置了，我们现在要进行一个测试，看看webpack+babel-loader是否能够构建ES6的语法。
创建webpack.config.js文件，来指导webpack的工作。途径：
l 去webapck的官网拿这个文件，https://webpack.js.org/configuration/
webpack.config.js：
const path = require(‘path‘);
//webpack是nodejs程序，所以这里是nodejs语法：
module.exports = {
entry: "./app/main.js", //程序主入口
output: { //程序的编译出的文件
path: path.resolve(__dirname, "dist"), //文件夹名字
filename: "all.js" //文件名字
},
module: { //挂载的一些模块
rules: [
{
test: /\.js$/, //所有以js结尾的
loader: "babel-loader", //请使用babel-loader的加载器
options: {
presets: ["es2015"]
}
}
]
},
watch : true
}
此时我们创建app文件夹，创建main.js文件和People.js文件：
main.js：
import People from "./People.js";
var xiaoming = new People();
xiaoming.haha();
People.js：
class People{
constructor(){
}
haha(){
alert("你好");
}
}
export default People;
此时运行webpack
webpack
注意，这是一个裸奔的webpack命令，没有写入口、出口，因为在webpack.config.js中已经写明了，webpack很聪明自己看自己的配置文件。
dist文件夹出现了，all.js构建完毕。
创建index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="http://www.mamicode.com/dist/all.js"></script>
</body>
</html>
此时webpack就可以工作了
React环境配置