javascript - ES5能不能用webpack实现模块化？

问题描述

问 题

有两个文件，为了方便维护分开写，最终用webpack打包到一起，main.js的源码是：

//main.js

var list = require('./list');

(function(window) {
    window.onload = function() {
        list.foo();
    };
})(window);

被引入的文件源码是：

var list = {
    foo: function() {
        console.log("success");
    }
};

就这么多，运行到list.foo()的时候，会报错！

我以为是作用域的问题，于是把main.js改成这样：

var list = require('./list');

(function(window) {
    window.onload = function() {
        console.log(list);
    };
})(window);

虽然返回了一个空空如也的对象，但这应该说明并不是作用域的问题。

为了验证，我又把main.js改成这样：

var list = require('./list');

(function(window) {
    window.onload = function() {
        //改成了输出一个完全不存在的对象
        console.log(li);
    };
})(window);

确实是会报错的。

请问是ES5不支持这样的做法？还是做法本身有什么问题？谢谢！

解决方案

@UKer
导出之后确实可以了。谢谢！不过，现在main.js文件必须这么调用：

var list = require('./list');

(function(window) {
    window.onload = function() {
        //必须这么写才能正确调用，否则会报错
        list.list.foo();
    };
})(window);

另一个文件稍微简化了一些，写成这样：

exports.list = {
    foo: function() {
        console.log("success");
    }
};

这句list.list.foo();怎么看都有点别扭，请问有办法改进得正常点吗？

这篇关于javascript - ES5能不能用webpack实现模块化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！