Laravel引入moment后出现jQuery/$未定义错误求助

看起来你在从CDN切换到Laravel Mix管理依赖的过程中，遇到了引入moment.js后连锁的全局变量未定义问题——虽然npm run watch编译没问题，但前端浏览器里一堆报错，对吧？我来帮你拆解下问题并给出解决方案。

问题根源分析 #

当你取消注释require("moment");后出现这些错误，大概率是webpack的模块封装机制导致的：

• 默认情况下，通过require或import引入的模块会被webpack封装在局部作用域里，不会自动挂载到window全局对象上
• 同时，moment的引入顺序或者webpack的优化逻辑，可能意外影响了jQuery全局挂载的有效性

具体解决方案 #

方案1：手动挂载moment到全局，确保jQuery优先级 #

修改你的resources/js/app.js代码，把moment也挂载到window上，并且保证jQuery的全局挂载是最先执行的：

// 先处理jQuery的全局挂载，确保优先级最高
import $ from 'jquery';
window.$ = window.jQuery = $;

// 引入moment并挂载到全局
import moment from 'moment';
window.moment = moment;

// 再引入其他依赖
import "bootstrap";
import "jquery.typewatch";
require("jquery-autosize");
import "cookieconsent";

import * as tt from "./main"
window.tt = tt;

这样修改后，moment会被挂载到全局window对象上，你的main.js里直接用moment即可，不需要再在main.js里写const moment = require('moment');。

方案2：用webpack.ProvidePlugin自动注入全局变量（更优雅） #

如果不想手动一个个挂载全局变量，可以在webpack.mix.js里配置ProvidePlugin，让webpack自动把这些模块注入到所有模块的作用域中，同时作为全局变量存在：

const mix = require('laravel-mix');
const webpack = require('webpack');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                moment: 'moment'
            })
        ]
    });

然后简化app.js代码，去掉手动挂载的逻辑：

import "bootstrap";
import "jquery.typewatch";
require("jquery-autosize");
import "cookieconsent";
import * as tt from "./main"
window.tt = tt;

这种方式下，webpack会自动把$、jQuery、moment作为全局变量注入，不管是在app.js还是main.js里都能直接使用。

额外注意事项 #

• 确保已经安装moment：如果还没装，运行npm install moment --save
• 检查footer.blade.php里是否还残留了CDN引入的jQuery或moment，要删掉这些链接，避免和Mix打包的文件冲突
• 删掉main.js里之前的const moment = require('moment');，直接用全局的moment即可

验证方法 #

修改完成后，运行npm run dev重新打包，刷新浏览器查看控制台是否还有报错，再测试Chart.js的时间线图表功能是否正常工作。

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