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();

即使用户已成功从包中实例化对象，它也无法正常工作，但在尝试＆＃34;重新访问＆＃34;时，它会记录未定义。控制台中的变量。似乎在捆绑文件时，它从browserify中包装在IIFE中，并且不再公开可以从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构造函数？

1 个答案: