JavaScript -- 设计模式 环境搭建

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

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

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

项目目录如下：

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

webpack.config.js 如下：

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

module.exports = {
    entry: path.join(__dirname, "./src/index.js"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "boudle.js"
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        },]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html")
        })
    ],

    devServer: {
        host: "localhost",
        port: 9000,
        open: true
    }
}

安装基础依赖如下：

在pakage.json中的scripts添加项：

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

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

class Person {
    constructor (name) {
        this.name = name;
    }
    getName () {
        return this.name;
    }
}

const p = new Person("cyl");
alert(p.getName());

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

ok大功告成！