Menu
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 command 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.
904
Browserify solves the problems of having too many JS files referenced in your HTML, inability to use Node modules in the browser, and inability to reference your own modules in your own code. Watchify streamlines the process of bundling your files and will make a change every time you change a JS file in your project.
The difference between the two boils down to speed. Webpack is building the project from source and continuing to do incremental builds as you are developing your project. Vite, on the other hand, is loading your actual code into the browser as needed.
Browserify is used to read the strings available in the static files, and the node uses the native read file function, whereas the webpack uses a common object to overload the needed function and applies a distinct loader to load the files, and its names should have a suitable pattern.
If your application is fairly small, and you don't have many static assets and you only need to build one Javascript file to serve to the client, then Webpack might be more overhead than you need.
You'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 common 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 });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
