如何使用Laravel Mix将自定义JS工具文件设为全局可用

Hey there! I’ve got two straightforward methods to help you make that test() function available anywhere in your Laravel project. Let’s dive in:

Method 1: Mount the Function to the window Object (Simple & Direct) #

This is the easiest approach—just attach your function to the browser’s global window object so it’s accessible everywhere.

1. Update your utils.js file
   Modify your existing code to explicitly mount the test function to window:

   'use strict';
   function test(){
       console.log('test');
   }
   
   // Add this line to make it global
   window.test = test;
   

2. Ensure utils.js is included in your build
   You have two options here:

   • Option A: Import it into your main JS file
     Open resources/assets/js/app.js and add this line at the top:

     import './common/utils.js';
     

     Then your regular Laravel Mix build command (npm run dev/prod) will bundle it into app.js.
   • Option B: Bundle it as a separate file
     Update your webpack.mix.js to include utils.js directly:

     mix.js('resources/assets/js/app.js', 'public/js')
        .js('resources/assets/js/common/utils.js', 'public/js');
     

     Don’t forget to add the generated utils.js script tag to your layout file (like resources/views/layouts/app.blade.php):

     <script src="{{ mix('js/utils.js') }}"></script>
     

Once you rebuild your assets, you can call test() from any JS file or even directly in your browser’s console—it’ll work!

Method 2: Use Webpack’s ProvidePlugin (More Elegant) #

If you prefer not to clutter the window object, you can use Webpack’s built-in ProvidePlugin to auto-inject your function wherever it’s referenced.

1. Export the function from utils.js
   First, update your file to export the test function (using CommonJS or ES modules):

   'use strict';
   function test(){
       console.log('test');
   }
   
   // Export the function
   module.exports = test;
   // Or for ES modules: export default test;
   

2. Configure Laravel Mix to use the plugin
   Open webpack.mix.js and add the Webpack configuration for ProvidePlugin:

   const webpack = require('webpack');
   const path = require('path');
   
   mix.js('resources/assets/js/app.js', 'public/js')
      .webpackConfig({
           plugins: [
               new webpack.ProvidePlugin({
                   test: path.resolve(__dirname, 'resources/assets/js/common/utils.js')
               })
           ]
       });
   

Now, whenever you use test() in any of your JS files, Webpack will automatically import the function from utils.js without you needing to write an import statement every time.

内容的提问来源于stack exchange，提问作者Trần Quốc Vũ