最近在学习Reactjs,从开始学到现在刚入门，最大的感触就是环境太TMD难配了,一下是我配置环境的过程
- 建立项目文件(APP),并进行初始化
mkdir APP
npm init
- 若无额外要求，一直火车即可
2.安装webpack,并将其加入项目依赖
npm install webpack --save-dev
3.配置webpack
- 在项目根目录下建立webpack.config.js文件,并编辑内容
touch webpack.config.js
module.exports = {
entry: "./entry.js", // 要打包的入口文件
output: { //打包后的文件
path: __dirname + '/dist', //表示使用绝对路径
filename: "bundle.js" //输出文件名
},
module: {
loaders: [ //用于加载一些静态文件夹（css样式，图片之类）
{test: /\.css$/, loader: "style-loader!css-loader"},
{
test: /\.jsx?$/,
loader: 'babel-loader',
// exclude: /node_modules/, //不进行转换的文件，可以提高打包速度
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
};
4.建立必要的的项目文件
- 建立entry.js作为入口文件
touch entry.js - 建立dist目录用于存放打包后输出的文件
mkdir dist - 建立index.html作为项目主页面
touch index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript"
src="./dist/bundle.js" charset="utf-8"></script>
</body>
</html>
- 建立public目录用于存放静态文件
- 建立.babelrc文件
touch .babelrc
{
"presets": [
"es2015",
"react"
]
}
- 安装必要依赖
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install react --save-dev
npm install react-dom --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-loader --save-dev
npm install css-loader --save-dev
npm install style-loader --save-dev
6.写个例子
- entry.js
import React, {Component} from 'react';
import {render} from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Hello World</div>;
}
}
render(<HelloMessage />, document.getElementById('app'));
- index.html不变
- 完成后首先在终端内运行
webpack编译文件，然后再打开index.html
