I have a test.js script which defines a class App and which is loaded from an HTML file, and all works.
When I create a testBundle.js bundle from test.js, using browserify or webpack, the class App inside testBundle.js seems no more defined.
How should I write the code or what options should I give to browserify to get App defined and use it from HTML as before, but from the bundle?.
The error I get after bundling is:
Uncaught ReferenceError: App is not defined
The html file is the following:
<html>
<script src="testBundle.js"></script>
<script>
var app = new App();
</script>
</html>
test.js:
'use strict';
class App {
constructor() {
console.log("App ctor")
}
}
the mand to build the bundle:
browserify -t [ babelify --presets [ es2015 ] ] test.js -o testBundle.js
It seems to me, looking inside the bundle, that App is actually private.
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]);
All this using Javascript from the browser, ES6.
I have a test.js script which defines a class App and which is loaded from an HTML file, and all works.
When I create a testBundle.js bundle from test.js, using browserify or webpack, the class App inside testBundle.js seems no more defined.
How should I write the code or what options should I give to browserify to get App defined and use it from HTML as before, but from the bundle?.
The error I get after bundling is:
Uncaught ReferenceError: App is not defined
The html file is the following:
<html>
<script src="testBundle.js"></script>
<script>
var app = new App();
</script>
</html>
test.js:
'use strict';
class App {
constructor() {
console.log("App ctor")
}
}
the mand to build the bundle:
browserify -t [ babelify --presets [ es2015 ] ] test.js -o testBundle.js
It seems to me, looking inside the bundle, that App is actually private.
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]);
All this using Javascript from the browser, ES6.
Share Improve this question edited Feb 4, 2017 at 20:06 cdarwin asked Jan 25, 2017 at 23:20 cdarwincdarwin 4,29110 gold badges47 silver badges70 bronze badges 1- Sorry but I believe (hope) there are better ways to solve the problem, I'm starting a bounty – cdarwin Commented Jan 28, 2017 at 12:25
3 Answers
Reset to default 11You're trying to access App in the global context. However, App is not made available globally by default. Node.js makes use of modules, and Browserify respects the encapsulation modules provide. When using tools like Browserify or Webpack, it is most mon to have one or more entry point modules (i.e. files) that make use of module imports/require() in order to access other modules.
But if you want to be able to access App in the global context within the browser, you can assign a reference to the App class to a property of window in test.js:
e.g.
window.App = App;
or
Object.assign(window, { App });
Essentially, what you're wanting to do is create a library instead of a regular bundle. If you're using webpack you can specify that you want your output to be a library, which will make it available globally via a namespace, similar to 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"
}
}
Then you can call all of your functions via Foo:
var app = new Foo.App()
var somethingElse = Foo.doSomethingElse()
Documentation & examples: https://webpack.github.io/docs/library-and-externals.html#examples
Webpack or Browserify bundle your scripts in certain context so you can only contact the classes or functions in that bundled context, which is in somewhere in the bundled script. So when you add another script in HTML, it can't access those bundled script's context. If you want to access App class, as far as I know, you can import/export the new script (which is now just making a new App) into the test.js