JavaScript — 设计模式 环境搭建

从现在开始，我们就正式开始学习设计模式，具体可以看左边目录。

所有和设计模式相关的JS代码，全部采用es6语法，以后可能还会使用ts代码，所以我们先使用webpack搭建一个环境。

注意这不是重点，不搞也行！这不是重点，看不懂下面操作，可以跳过，直接进入下一节！

项目目录如下：

其中dist目录为输出文件夹，src/index.js为测试js,  src/index.html为模板html.

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
1

2const path = require("path");

3const HtmlWebpackPlugin = require("html-webpack-plugin");

4

5module.exports = {

6    entry: path.join(__dirname, "./src/index.js"),

7    output: {

8        path: path.join(__dirname, "dist"),

9        filename: "boudle.js"

10    },

11    module: {

12        rules: [{

13            test: /\.js$/,

14            exclude: /node_modules/,

15            loader: "babel-loader"

16        },]

17    },

18    plugins: [

19        new HtmlWebpackPlugin({

20            template: path.join(__dirname, "./src/index.html")

21        })

22    ],

23

24    devServer: {

25        host: "localhost",

26        port: 9000,

27        open: true

28    }

29}

30

安装基础依赖如下：

在pakage.json中的scripts添加项：

1
2
1"dev": "webpack-dev-server --config ./webpack.config.js --mode development"

2

我们在src/index.js写下如下代

1
2
3
4
5
6
7
8
9
10
11
12
1class Person {

2    constructor (name) {

3        this.name = name;

4    }

5    getName () {

6        return this.name;

7    }

8}

9

10const p = new Person("cyl");

11alert(p.getName());

12

运行npm run dev，在localhost:9000端口

ok大功告成！