与browserify或webpack捆绑后访问“公共”会员

我有一个test.js脚本，它定义了一个类App，它是从一个HTML文件加载的，并且所有的工作。与browserify或webpack捆绑后访问“公共”会员

当我从test.js创建testBundle.js捆绑包时，使用browserify或webpack，testBundle.js中的类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

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

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。

来源

2017-01-25 cdarwin

很抱歉，但我相信，（希望）有更好的方法来解决这个问题，我开始一个赏金 – cdarwin

本质上，你想要做的是创建一个库，而不是一个普通的包。如果你使用的是webpack，你可以指定你希望你的输出成为一个库，这将使它可以通过名字空间全局使用，类似于jQuery。

然后，你可以经由富拨打您的所有功能：

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

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

来源

2017-02-03 05:44:10 shadymoses

您正试图在全球范围内访问App。但是，默认情况下，App不是全局可用的。 Node.js使用模块，Browserify尊重封装模块提供的功能。使用Browserify或Webpack等工具时，通常有一个或多个使用模块imports/require（）访问其他模块的入口点模块（即文件）。

但是，如果你希望能够访问App在浏览器内全球范围内，你可以到App类的引用分配给一个test.js的window属性：

例如

window.App = App;

或

Object.assign(window, { App });

来源

2017-01-25 23:38:35 fvgs

这个工作，但如果我有其他类，我不得不在每个脚本的末尾使用windows.MyClass = MyClass“导出”每个类？我希望有另一种解决方案 – cdarwin

从其他模块访问实体的正常方式是使用导入/导出或require（）。你想通过全球访问你的所有类来避开这一点，而不是如何使用Browserify或Webpack。你可能不需要在你的html中有任何单独的''，而应该有一个入口点js文件，它导入/需要它所依赖的脚本。这应该是您为Browserify或Webpack指定的条目文件。 – fvgs

你说“应该有一个入口点js文件导入/需要的脚本”，但我使用JavaScript从浏览器，不能使用导入或需要... – cdarwin

的WebPack或Browserify捆绑你的脚本在一定的语境，所以你只能联系类或函数在这方面捆绑在一起，这是在绑定脚本的地方。因此，当您在HTML中添加另一个脚本时，它无法访问这些捆绑脚本的上下文。如果你想访问应用程序类，据我所知，你可以导入/导出新脚本（现在只是一个新的应用程序）到test.js

来源

2017-01-26 00:05:28

你可以指定更好的为“导入/导出新脚本”的mena吗？ – cdarwin

基本上我会避免在HTML中使用添加新脚本，并使webpack条目文件包含所有脚本，例如在另一个文件app.js中实现App并将其导入到test.js（它是入口文件） –

与browserify或webpack捆绑后访问“公共”会员

回答

相关问题