React环境搭建

发布 : 2016-11-09 分类 : 大前端 浏览 :

1.babel

1.1.将es6编译成es5，jsx语法也可以进行编译

1.2.babel安装

1.2.1.安装依赖包

1
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

Markdown

1.3.将es6转换成es5，配置webpack.config.js文件

1
2
3
4
5
6
7
8
注意：在webpack.config.js中添加
{
    "test":/\.js$/,
    "loader":"babel-loader",
    "query":{
        presets:["es2015","react"]
    }
}

1.3.1.webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  devtool: "eval-source-map",
  entry : __dirname + "/app/app.js",
  output : {
    path : __dirname + "/build",
    filename : "bundle.js"
  },
  module:{
    loaders:[
      {
        "test":/\.json$/,
        "loader":"json-loader"
      },
      {
        "test":/\.js$/,
        "loader":"babel-loader",
        "query":{
          presets:["es2015","react"]
        }
      }
    ]
  }
}

1.4.安装React依赖

1
cnpm install --save react react-dom

Markdown

1.5.搭建React环境，修改代码

1.5.1.app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 引入hello.js
// var hello = require("./hello.js")
// document.getElementById("root").appendChild(hello());

// 使用Es6
import React from "react";
import ReactDom from "react-dom";
import Hello from "./hello.js";

// 创建class
class App extends React.Component{
  render(){
    return(
      <Hello />
    )
  }
}

ReactDom.render(<App />,document.getElementById('root'))

// es5
// var App = React.createClass({
//   render:function(){
//
//   }
// })

1.5.1.hello.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// var Data = require("./data.json");
// module.exports = function(){
//   var hello = document.createElement("div");
//   hello.textContent = Data.name + "," + Data.age + "," + Data.info.work + "," + Data.info.workage;
//   return hello
// }

import React from "react";
import ReactDom from "react-dom";
import Data from "./data.json";

// es6写法
class Hello extends React.Component{
  render(){
    return (
      <div>{Data.name}</div>
    )
  }
}

// 导出hello
export default Hello

1.5.1.启动webpack服务器

1
npm run build

1.5.1.在浏览器访问localhost:8080

1
http://localhost:8080/

Markdown

2.css和image处理

1
webpack提供了两个处理样式表：css-loader和style-loader

2.1.安装css的处理

1
cnpm install --save-dev css-loader style-loader

Markdown

Markdown

2.2.配置webpack.config.js

1
2
3
4
5
6
注意：在webpack.config.js文件中添加
{
    "test":/\.css$/,
     // 先写：style-loader再写css-loader
    "loader":"style-loader!css-loader"
}

2.2.1.webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
module.exports = {
  devtool: "eval-source-map",
  entry : __dirname + "/app/app.js",
  output : {
    path : __dirname + "/build",
    filename : "bundle.js"
  },
  module:{
    loaders:[
      {
        "test":/\.json$/,
        "loader":"json-loader"
      },
      {
        "test":/\.js$/,
        "loader":"babel-loader",
        "query":{
          presets:["es2015","react"]
        }
      },
      {
        "test":/\.css$/,
        "loader":"style-loader!css-loader"
      }
    ]
  }
}

2.3.引用css文件

1
import "./style.css";

2.4.将css文件引入项目工程中

2.4.1.app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 引入hello.js
// var hello = require("./hello.js")
// document.getElementById("root").appendChild(hello());

// 使用Es6
import React from "react";
import ReactDom from "react-dom";
import Hello from "./hello.js";
import "../css/init.css";

// 创建class
class App extends React.Component{
  render(){
    return(
      <Hello />
    )
  }
}

ReactDom.render(<App />,document.getElementById('root'))

// es5
// var App = React.createClass({
//   render:function(){
//
//   }
// })

2.4.2.hello.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// var Data = require("./data.json");
// module.exports = function(){
//   var hello = document.createElement("div");
//   hello.textContent = Data.name + "," + Data.age + "," + Data.info.work + "," + Data.info.workage;
//   return hello
// }

import React from "react";
import ReactDom from "react-dom";
import Data from "./data.json";
import "../css/style.css";

// es6写法
class Hello extends React.Component{
  render(){
    return (
      <div className="test">{Data.name}</div>
    )
  }
}

// 导出hello
export default Hello

2.4.3.style.css

1
2
3
.test{
  color:red;
}

2.4.4.init.css

1
2
3
4
*{
  margin: 0;
  padding: 0;
}

2.4.5.启动webpack服务器

1
npm run build

2.4.6.在浏览器访问localhost:8080

Markdown

2.5.image的引用

1
在webpack目录下，创建image目录，将本地图片放入image目录中
1
2
3
4
5
6
7
8
webpack提供了图片的处理方案
{
    "test":/\.(png|jpg|gif|jpeg)$/,
    "loader":"url-loader?limit=8129"
}
注意：
1.多个文件后缀，使用小括号
2.如果图片大小于8129则会压缩成base64
1
cnpm install --save-dev file-loader url-loader

Markdown

2.5.1.hello.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// var Data = require("./data.json");
// module.exports = function(){
//   var hello = document.createElement("div");
//   hello.textContent = Data.name + "," + Data.age + "," + Data.info.work + "," + Data.info.workage;
//   return hello
// }

import React from "react";
import ReactDom from "react-dom";
import Data from "./data.json";
import "../css/style.css";
import logo from "../image/test.png"

// es6写法
class Hello extends React.Component{
  render(){
    return (
      <div>
        <div className="test">{Data.name}</div>
        <img alt="logo" src={logo}/>
      </div>
    )
  }
}

// 导出hello
export default Hello

2.5.2.webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var webpack = require("webpack");
var openBrows = require("open-browser-webpack-plugin");

module.exports = {
  devtool: "eval-source-map",
  entry : __dirname + "/app/app.js",
  output : {
    path : __dirname + "/build",
    filename : "bundle.js"
  },
  module:{
    loaders:[
      {
        "test":/\.json$/,
        "loader":"json-loader"
      },
      {
        "test":/\.js$/,
        "loader":"babel-loader",
        "query":{
          presets:["es2015","react"]
        }
      },
      {
        "test":/\.css$/,
        "loader":"style-loader!css-loader"
      },
      {
        "test":/\.(png|jpg|gif|jpeg)$/,
        "loader":"url-loader?limit=8129"
      }
    ]
  },
  plugins:[
    new openBrows({
      url:"http://localhost:8080"
    })
  ]
}

2.5.3.启动webpack服务器

1
npm run build

Markdown

3.Less

1
2
3
4
5
6
7
8
9
10
webpack提供了less和sass的处理方案

安装：
cnpm install --save-dev less less-loader

配置：
{
  "test":/\.less$/,
  "loader":"style-loader!css-loader!less-loader"
}

Markdown

3.1.配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var webpack = require("webpack");
var openBrows = require("open-browser-webpack-plugin");

module.exports = {
  devtool: "eval-source-map",
  entry : __dirname + "/app/app.js",
  output : {
    path : __dirname + "/build",
    filename : "bundle.js"
  },
  module:{
    loaders:[
      {
        "test":/\.json$/,
        "loader":"json-loader"
      },
      {
        "test":/\.js$/,
        "loader":"babel-loader",
        "query":{
          presets:["es2015","react"]
        }
      },
      {
        "test":/\.css$/,
        "loader":"style-loader!css-loader"
      },
      {
        "test":/\.(png|jpg|gif|jpeg)$/,
        "loader":"url-loader?limit=8129"
      },
      {
        "test":/\.less$/,
        "loader":"style-loader!css-loader!less-loader"
      }
    ]
  },
  plugins:[
    new openBrows({
      url:"http://localhost:8080"
    })
  ]
}

3.2.hello.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// var Data = require("./data.json");
// module.exports = function(){
//   var hello = document.createElement("div");
//   hello.textContent = Data.name + "," + Data.age + "," + Data.info.work + "," + Data.info.workage;
//   return hello
// }

import React from "react";
import ReactDom from "react-dom";
import Data from "./data.json";
import "../css/style.css";
import logo from "../image/test.png"
// 引入less文件
import "../css/demo.less"

// es6写法
class Hello extends React.Component{
  render(){
    return (
      <div>
        <div className="test">{Data.name}</div>
        <img alt="logo" className="myImg" src={logo}/>
      </div>
    )
  }
}

// 导出hello
export default Hello

3.3.demo.less

1
2
3
4
5
6
@width:100px;
@height:100px;
.myImg{
  width:@width;
  height:@height;
}

4.安装插件

1
webpack在启动服务器之后，可以直接开启浏览器
1
cnpm install --save-dev open-browser-webpack-plugin
1
2
3
4
5
6
在webpack.config.js中配置
plugins:[
    new openBrows({
      url:"http://localhost:8080"
    })
  ]

Markdown

4.1.webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var webpack = require("webpack");
var openBrows = require("open-browser-webpack-plugin");

module.exports = {
  devtool: "eval-source-map",
  entry : __dirname + "/app/app.js",
  output : {
    path : __dirname + "/build",
    filename : "bundle.js"
  },
  module:{
    loaders:[
      {
        "test":/\.json$/,
        "loader":"json-loader"
      },
      {
        "test":/\.js$/,
        "loader":"babel-loader",
        "query":{
          presets:["es2015","react"]
        }
      },
      {
        "test":/\.css$/,
        "loader":"style-loader!css-loader"
      },
      {
        "test":/\.(png|jpg|gif|jpeg)$/,
        "loader":"url-loader?limit=8129"
      },
      {
        "test":/\.less$/,
        "loader":"style-loader!css-loader!less-loader"
      }
    ]
  },
  plugins:[
    new openBrows({
      url:"http://localhost:8080"
    })
  ]
}

4.2.启动webpack服务器

1
npm run build

Markdown

1
浏览器自动打开

Markdown

本文作者 : Matrix
原文链接 : https://matrixsparse.github.io/2016/11/09/React环境搭建/
版权声明 : 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！

知识 & 情怀 | 二者兼得

微信扫一扫, 向我投食

微信扫一扫, 向我投食

支付宝扫一扫, 向我投食

支付宝扫一扫, 向我投食

标签: #大前端 #React
留下足迹