Webpack 变量答案

【问题标题】：Webpack variablesWebpack 变量
【发布时间】：2017-02-16 19:19:54
【问题描述】：

我刚开始使用 webpack，我在互联网上找不到任何问题的答案。

我有两个脚本：

var yolo = "lol";
console.log(yolo);
require("./module.js");

console.log(yolo);

为什么module.js中没有定义变量yolo？我该如何解决这个问题？

我想用socket.io服务器写一个复杂的html5游戏。

【问题讨论】：

研究 CommonJS 模块（无论如何你都会想这样做），原因应该很明显。
我怎么从来没有听说过CommonJS？看起来有点复杂。

标签： javascript webpack

【解决方案1】：

简而言之，CommonJS 模块的工作方式如下：

module.js

var yolo = "lol";
console.log(yolo);
module.exports = {
    yolo: yolo
};

client.js

var module = require("./module");
console.log(module.yolo);

【讨论】：

【解决方案2】：

开始使用 webpack 的好地方是 MadeWithLove 的 Webpack your bags。

一旦您掌握了创建 javascript 组件的窍门，就可以真正轻松地过渡到使用 Three js 或其他引擎来开发您的游戏。另外使用 babel 你可以开始使用 es2016 并且你的模块看起来更像这样：

// yolo.js
export default class Yolo {
    constructor () {
        this.lifeMotto = 'yolo'
    }

    printMotto () {
        console.log(this.lifeMotto)
    }

}

// main.js
import Yolo from './yolo'

let motto = new Yolo()
motto.printMotto()

总而言之，Webpack 非常棒，它会让您的游戏开发变得轻而易举。

【讨论】：