最简单一遍就会的react脚手架搭建，标准的package.json文件以及webpack.config.js文件

相信网上有各种react的脚手架搭建的教程，但是各位刚入门的同学看了都眼花缭乱，不是文件路径，就是各种问题，我只发一篇最简单的
不要用什么 npm init 啥的来搞

1.在桌面上建立一个文件夹
最简单一遍就会的react脚手架搭建，标准的package.json文件以及webpack.config.js文件
2.直接在里面建立package.json文件，里面的代码如下
直接复制如下这个已经够用，如果需要其他依赖可以自己增加
步骤：打开与node_modules平级的目录 npm install name(所需依赖的名字) --save --dev 加入到package.json中

{
  "name": "Business",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.5.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  },
  "dependencies": {
    "antd": "^3.15.2",
    "cropperjs": "^1.0.0-rc.3"
  }
}

3.建立webpack.config.js文件，代码直接粘贴就行，

var path = require("path");

const config = {
	//入口文件
	entry: './src/main.js',
	output: {
		//打包文件名称
		filename: "rukou.js",
			//路径
		path: path.resolve(__dirname,'dist')
	},
	devServer: {
			//服务器地址
		host: "localhost",
		compress: true,
			//端口号
		port: 9000
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env','es2015','react'],
						plugins: ['transform-runtime']
					}
				}
			}
		]
	}
};

module.exports = config;

4.确保这两个文件建立
最简单一遍就会的react脚手架搭建，标准的package.json文件以及webpack.config.js文件

然后我们直接npm install 来安装package.json需要的依赖
这里需要注意，cmd命令打开路径要在你们文件夹下
如图
最简单一遍就会的react脚手架搭建，标准的package.json文件以及webpack.config.js文件
5.然后直接回车安装，等待依赖安装完毕

此时文件路径如上

6. 在建立index.html 一定要是index.html
最简单一遍就会的react脚手架搭建，标准的package.json文件以及webpack.config.js文件
index.html代码如下

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
  </head>
  <body>
    <div id="app"></div>
    <script src="/rukou.js"></script>
  </body>
</html>

7.注意index.html代码里面的每一句的意思要了解

   <div id="app"></div>
    这里的id是挂在的节点，后面会说，
   <script src="/rukou.js"></script>
    这里引入的js就是webpack.config.js中的	filename: "rukou.js",名字一定要一样
    路径必须这样写 ，不然你跑不起来

5.到这里项目距离跑起来差不多了，不过还差最后一部
我们在上面配置中的入口文件是entry: ‘./src/main.js’,所以我们需要根据路径建立文件夹
最简单一遍就会的react脚手架搭建，标准的package.json文件以及webpack.config.js文件
8.然后在src中机建立main.js文件
main.js代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import {
	HashRouter
} from 'react-router-dom';

import Index from './Index/index.js';
ReactDOM.render(
			
	<Index/>,//这里组件可以根据自己需要去写，我们这理是为了跑起来看效果
	document.getElementById("app")
);

上面需要注意document.getElementById(“app”)这里的id要和index.html中的ID一样
最后我们建立 ,组件
最简单一遍就会的react脚手架搭建，标准的package.json文件以及webpack.config.js文件
注意上面是import Index from ‘./Index/index.js’;
在在Index文件下建立index.js文件

import React from 'react';
import {
    NavLink
} from "react-router-dom";

class Index extends React.Component{
	constructor(props){
		super(props);
		
	}
	
	
	render(){
		return(
			<div >
				react跑起来了
			</div>
		)
	}
}

export default Index;

9.最后执行命令

npm run server

等命令结束打开

http://localhost:9000

新学的同学以后再次搭建环境就可以直接用上面的方法，如果你跑起来了觉得这个方法更容易了解，请点个赞，就是最大的支持

最简单一遍就会的react脚手架搭建，标准的package.json文件以及webpack.config.js文件

相关推荐