So I'm working on a project that has quite a bit of Javascript. We're wanting to put the Javascript through Laravel Mix for it to be able to minify it as well as use NPM modules in it. We've moved the files over into the resources directory, and added them into the webpack.mix.js. But after running npm run dev I can no longer access the functions that were in those Javascript files in the HTML, developer console, or from other JS files.
Here's what my webpack file looks like currently.
mix.babel('resources/js/app.js', 'public/js/app.js')
.babel('resources/js/mobile/global.js', 'public/js/mobile/global.js')
.babel('resources/js/lw-sortable.js', 'public/js/lw-sortable.js');
mix.sass('resources/sass/app.scss', 'public/css/app.css')
.sass('resources/sass/darkmode.scss', 'public/css/darkmode.css')
.sass('resources/sass/dashboard.scss', 'public/css/dashboard.css');
I would just use mix.scripts() for the minification, but I would also like to be able to use the import statements with NPM modules directly into the JS.
Any help would be greatly appreciated. Thanks!
That is true. When compiling it like that it is not longer bound to the global scope (window). This is to avoid clashing with each other if names are reused.
This means you need to bind them manually
For instance
//before
function foo () {
}
//add
window.foo = foo; //Now accessible outside of the modules
There might be a way to let webpack do this automatically, but I honestly can't remember
Hey that worked! Thank you so much!
Happy to help. If you have a ton of functions you can try searching Google for something like "webpack bind window"
Please or to participate in this conversation.