访问"公共"与browserify或webpack捆绑后的成员

时间:2017-01-25 23:20:54

标签: javascript webpack bundle browserify

我有一个test.js脚本,它定义了一个类App,它是从HTML文件中加载的,并且都可以。

当我使用browserify或webpack从testBundle.js创建test.js捆绑包时,App内的类testBundle.js似乎不再定义。

我应该如何编写代码或者我应该给browserify提供哪些选项以获取App定义并像以前一样从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 

在我看来,在包内看,App实际上是私有的。

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。

3 个答案:

答案 0 :(得分:9)

您正试图在全球范围内访问App。但是,默认情况下,App在全局范围内不可用。 Node.js使用模块,Browserify尊重封装模块提供的。使用Browserify或Webpack等工具时,最常见的是有一个或多个入口点模块(即文件),它们使用模块导入/ require()来访问其他模块。

但是,如果您希望能够在浏览器中访问全局上下文中的App,则可以将App类的引用分配给测试中window的属性。 JS:

e.g。

window.App = App;

Object.assign(window, { App });

答案 1 :(得分:1)

基本上,您想要做的是创建一个库而不是一个常规的包。如果你正在使用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()

文档&amp;示例:https://webpack.github.io/docs/library-and-externals.html#examples

答案 2 :(得分:0)

Webpack或Browserify在特定上下文中捆绑您的脚本,因此您只能联系捆绑上下文中的类或函数,该上下文位于捆绑脚本中的某个位置。因此,当您在HTML中添加另一个脚本时,它无法访问这些捆绑脚本的上下文。如果你想访问App类,据我所知,你可以导入/导出新脚本(现在只是制作一个新的应用程序)到test.js