为 NPM 前端库公开 JS 构造函数？

Question

我已经在 NPM 上发布了我的第一个包，并且运行解决了一些我一直在努力解决的问题。我觉得这个问题可能是我想念的简单问题，但我需要问问自己的理智。

我已经发布了这个包，但是我运行遇到的问题是，在使用 browserify 捆绑文件时，我似乎遇到了一些范围问题。我将我的 micro-lib 包裹在一个 IIFE 中，并试图 module.export 在 IIFE 底部返回的构造函数，它看起来像这样：

var Package = (function() {

    /* Constructor */
    function Package(foo, bar) {
       this.foo = foo;
       this.bar = bar;
    }

     // Bunch of private methods (don't HAVE to be private)

    // API methods I want user to be able to access from chrome console

    Package.prototype.$method = function() {
        return this.foo;
    };

    return Package;
})();

// Expose constructor?
module.exports = Package;

目标是让用户需要我的包裹

var package = require('package-name');
var P = new package(foo, bar);

^^ 如果我输入 console.log(P)，上面的方法到目前为止有效；它会记录到控制台，但是当我希望包使用者使用控制台中的原型来注销一些配置设置以供参考时：

P.$config();

它不起作用，即使用户已成功实例化包中的对象，但它在尝试 "re-access" 控制台中的变量时记录未定义。似乎在捆绑文件时，它被包裹在来自 browserify 的 IIFE 中，并且不再 public 可以从 chrome 控制台访问......我在这里做错了什么？我敢肯定这是很多事情，但我似乎无法理解它。

我尝试将 browserify 与 --standalone (-s) 捆绑在一起以公开 module.exports 包变量，但它不起作用。谁能花一两分钟解释发布 npm（前端）包的工作流程？我是否需要删除我的包周围的 IIFE，只需要打开构造函数？

在此先感谢你们，我很感激。

Answer 1

你写的模块没问题。你只需要妥善处理一个。写这样script.js得到全局变量h进一步使用：

h = require('./index.js');   // file with your module

然后，使用browserify:

browserify script.js > lel.js

然后您可以像这样在您的应用程序中使用它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <script src="lel.js"></script>
    <script>
        var lel = new h(123, 456);

        console.log(lel.$method()); // 123
    </script>
</body>
</html>

不知道这是否是最好的做法，但它对我来说非常有效。

为 NPM 前端库公开 JS 构造函数？

Exposing JS constructor for NPM front end library?

javascript

frontend

npm