使用 browserify 或 webpack 捆绑后访问 "public" 个成员

Question

我有一个 test.js 脚本，它定义了 class App 并从 HTML 文件中加载，并且一切正常。

当我使用 browserify 或 webpack 从 test.js 创建一个 testBundle.js 包时，testBundle.js 中的 class App 似乎不再定义。

我应该如何编写代码或者我应该给 browserify 什么选项来定义应用程序并像以前一样从 HTML 使用它，但是从捆绑包中使用它？

打包后出现的错误是：

Uncaught ReferenceError: App is not defined

html 文件如下：

<html>
   <script src="testBundle.js"></script>

   <script>
       var app = new App();
   </script>
</html>

test.js:

'use strict';

class App {
    constructor() {
        console.log("App ctor")
    }
}

构建包的命令：

browserify -t [ babelify --presets [ es2015 ] ] test.js  -o testBundle.js

在我看来，从捆绑包内部来看，该应用程序实际上是私有的。

testBundle.js

(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){
'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var App = function App() {
    _classCallCheck(this, App);

    console.log("App ctor");
};


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

所有这些都使用来自浏览器的 Javascript，ES6。

Answer 1

您正在尝试在全局上下文中访问 App。但是，默认情况下 App 不是全局可用的。 Node.js 使用模块，Browserify 尊重模块提供的封装。当使用像 Browserify 或 Webpack 这样的工具时，最常见的是有一个或多个入口点模块（即文件）使用模块 imports/require() 来访问其他模块。

但是如果您希望能够在浏览器的全局上下文中访问 App，您可以将对 App class 的引用分配给 [=29= test.js 中 window 的 ]：

例如

window.App = App;

或

Object.assign(window, { App });

Answer 2

Webpack 或 Browserify 在特定上下文中捆绑您的脚本，因此您只能联系捆绑上下文中的 classes 或函数，它位于捆绑脚本中的某个位置。因此，当您在 HTML 中添加另一个脚本时，它无法访问那些捆绑脚本的上下文。如果你想访问应用程序 class，据我所知，你可以 import/export 将新脚本（现在正在制作一个新应用程序）放入 test.js

Answer 3

本质上，您想要做的是创建一个库而不是常规包。如果您使用的是 webpack，则可以指定您希望输出是一个库，这将通过命名空间使其在全球范围内可用，类似于 jQuery.

// relevant part of your webpack config
// from webpack docs
{
  output: {
    // export itself to a global var
    libraryTarget: "var",
    // name of the global var: "Foo"
    library: "Foo"
  }
}

然后你可以通过 Foo 调用你所有的函数:

var app = new Foo.App()
var somethingElse = Foo.doSomethingElse()

文档和示例：https://webpack.github.io/docs/library-and-externals.html#examples

使用 browserify 或 webpack 捆绑后访问 "public" 个成员

Accessing "public" members after bundling with browserify or webpack

javascript

bundle

browserify

webpack