Laravel 9（Vite）中如何在其他脚本调用app.js导入的moment.js？

问题场景 #

使用默认Vite作为打包工具的Laravel 9.48.0，执行npm install moment --save安装moment.js后，在app.js中通过import moment from 'moment/moment';导入，仅能在app.js内部正常调用，在其他脚本中访问时触发错误：

Uncaught ReferenceError: moment is not defined

解决方法 #

Vite基于ES模块机制运行，导入的模块默认仅在当前文件作用域内生效。要让moment全局可访问，只需像挂载Alpine一样，将其绑定到window对象上。

修改app.js代码，在导入moment后添加全局挂载语句：

import './bootstrap';

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
import moment from 'moment/moment';

window.Alpine = Alpine;
window.moment = moment; // 新增此行，将moment挂载到全局

Alpine.plugin(focus);
Alpine.start();

console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));

修改完成后，无论是页面内的独立<script>标签，还是其他Vite打包的脚本文件，都能直接调用moment方法。如果在Livewire组件中使用，确保页面已正确加载Vite打包的app.js资源。

相关配置文件参考 #

vite.config.js #

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

package.json #

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@alpinejs/focus": "^3.10.5",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.2.4",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "moment": "^2.29.4"
    }
}

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