Laravel Mix编译原生JavaScript函数失效问题求助

Hey there! I totally get the frustration—you write a simple function like publisher() and after compiling with Laravel Mix, it just won’t run. The culprit here is Webpack (the tool powering Laravel Mix), which wraps all your code in module-level scope by default. That means your function isn’t exposed globally, so when you try to call it from your HTML or another script, the browser can’t find it.

Let’s go through three solid solutions to fix this:

1. Expose the Function to the Global window Object (Quickest Fix) #

The simplest way to make your function accessible everywhere is to attach it directly to the browser’s global window object. Modify your function like this:

// resource/asset/app/your-file.js
window.publisher = function() {
    // event.preventDefault();
    console.log('working');
};

Now, when you compile with Mix, the publisher function will be available globally, and you can call it just like you expected.

2. Use ES Modules (Recommended for Modern Projects) #

If you want to avoid cluttering the global scope (a best practice for larger projects), use ES module syntax to export and import your function.

First, export the function in your JS file:

// resource/asset/app/your-file.js
export function publisher() {
    // event.preventDefault();
    console.log('working');
}

Then, in the file where you need to use it (like another JS module or your entry point), import it:

// In your main app.js or another module
import { publisher } from './path/to/your-file.js';

// Call the function whenever you need it
publisher();

This keeps your code organized and avoids global variable conflicts.

3. Configure Webpack to Auto-Expose the Function #

If you prefer not to modify your function code, you can set up Laravel Mix to tell Webpack to expose your function as a global variable. Edit your webpack.mix.js file:

// webpack.mix.js
const webpack = require('webpack');

mix.js('resources/js/app.js', 'public/js')
   .webpackConfig({
       plugins: [
           new webpack.ProvidePlugin({
               publisher: ['resources/js/your-file.js', 'publisher']
           })
       ]
   });

This tells Webpack to inject the publisher function into every module as a global variable, so you can call it without importing or attaching to window.

Quick Checks to Ensure It Works #

• Double-check that your JS file is included in your Mix compilation (make sure it’s imported in your main app.js or listed in your Mix config).
• Open your browser’s developer tools (F12) and check the Console tab for any errors—if you see "publisher is not defined", it means the function still isn’t exposed properly.

内容的提问来源于stack exchange，提问作者rhidaytm