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

为什么？

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

如何使该功能像以前一样可用？

您可以explicitly create a global variable或导出对象和configure browserify to expose that export。

为什么在浏览Browserify后代码的行为会有所不同？

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

JS + Browserify：在Browserify构建之后无法访问/定义函数

1 个答案: