React学习（三）

发表于 | 分类于 |

一、ECMAScript2016 引包

import 是 ECMAScript 2016的最新语法。如果加上大括号引用一个模块：

1
import {fn,fn2} from "./a.js";

表示：
用fn来接受 a 模块中的exports.fn= function(){}

用fn2来接受 a 模块中的exports.fn2=function(){}

如果一个模块是一个类，它是这么写的：

1
2
3
4
5
6
7
8
9
10
11
class People{
	constructor(name){
		this.name = name;
	}

	sayHello(){
		alert("哈哈，我是" + this.name);
	}
}

export default People;  //注意这里的ECMAScript2016的暴露语法

此时引包就不能加大括号：

1
import People from "./People.js"

注意ECMAScript2016中定义类的语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
class 类名{
	constructor(){

	}

	类的实例方法1(){

	}

	类的实例方法2(){

	}
}

二、webpack-dev-server

The webpack-dev-server is a little Node.js Express server。可以模拟一个服务器，底层是nodejs+express，让我们的前端代码可以不在阿帕奇中但是快速能够获得一个服务器环境。并且是自动检测代码改变的，可以替代之前的watch功能。

安装：

1
cnpm install webpack-dev-server --save-dev

然后在package.json中创建一个 script：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "webpack_dev_server_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }
}

此时我们加上的start表示一会儿可以用npm run start来运行程序，此时npm将帮助我们敲击webpack-dev-server命令。

此时webpack.config.js文件，多了一条output设置：

1
2
3
4
5
6
7
8
9
10
11
var path = require("path");
module.exports = {
  entry: {
    app: ["./js/main.js"]
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/mydist/",
    filename: "bundle.js"
  }
};

publicPath表示要将我们的文件编译到哪个虚拟地址。注意，编译出的文件bundle.js不会真正的生成，就是说你用资源管理器看不见这个文件。但是webpack_dev_server在后台帮我们用express增加了一个路由，路由正是用publicPath来定义的：

此时npm run start就可以打开http://127.0.0.1:8080/
来查看项目。8080 端口是webpack_dev_server的默认端口。

除了publicPath之外呢，webpack.config.js文件没有任何变化，在文件中不会体现这个东西将会开启一个服务器。也就是说体现开启服务器，就是在package.json中配置一个script。
实时监听的，任何文件变化，都会立即更改，由于不用写文件，所以要比watch要快。

------ 本文结束 ------
0%