JS + Browserify：Browserify 构建后函数不是 accessible/defined

Question

我已经定义了一个自发射函数。

'use strict'

var test = (function(){
    console.log('This should log to console immediately.')
    function testMe() {
        console.log('Test successful!')
    }
    return {
        testMe: testMe
    }
})()

当浏览器加载脚本时，该函数将触发并将输出记录到控制台。同样，test.testMe() 会在 cosole 中生成一个日志。

但是，我想包含一些 NPM 模块是我的项目。为此，我正在使用 Browserify。

问题是，Browserify 构建的代码的工作方式不同。外部函数立即触发，但无法使用 test.testMe() 访问内部函数。我得到一个错误：

index.html:32 Uncaught ReferenceError: test is not defined

为什么？如何使该功能像以前一样可用？为什么代码在经过 Browserify 后表现不同？

作为参考，这里是浏览器代码：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
// main.js
var test = (function(){
    console.log('This should log to console immediately.')
    function testMe() {
        console.log('Test successful!')
    }
    return {
        testMe: testMe
    }
})()

},{}]},{},[1]);

Answer 1

Why?

正如您在浏览器代码中看到的那样，您的代码现在位于一个函数内，这意味着 test 已在本地声明为该函数。您无法在控制台中访问它，因为它不是全局的。

How can I make the function available as before?

您可以 explicitly create a global variable or export the object and configure browserify to expose that export。

Why does the code behave differently after going through Browserify?

浏览器代码与您的代码不同。另见第一段。

JS + Browserify：Browserify 构建后函数不是 accessible/defined

JS + Browserify: Function not accessible/defined after Browserify build

javascript

browserify