Laravel视图中调用已安装npm包big.js提示Big未定义报错问题

你遇到的报错有两个核心原因：

1. 通过npm引入的big.js默认是模块作用域，你在app.js中声明的Big变量仅在app.js的模块内部可访问，没有挂载到全局window对象，页面内联的script标签无法直接访问。
2. 你引入app.js时加了defer属性，该属性会让脚本等到页面DOM解析完成后才执行，而create.blade.php中的内联script会在页面解析到对应位置时立即执行，执行时app.js还未加载完成，自然找不到Big对象。

步骤1：将Big挂载到全局作用域 #

修改app.js中引入big.js的代码：

// 把原来的 const Big = require('big.js') 替换为下面的代码
window.Big = require('big.js');

步骤2：调整内联脚本的执行时机 #

把create.blade.php的<script>标签内的所有代码包裹在DOMContentLoaded事件回调中，确保app.js加载完成后再执行逻辑：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 把你原来的所有js代码放到这里
    console.log(new Big(1.0));
    const METRED_INPUT = document.querySelector('select#metred_input_id');
    let lastTwoReadings = {!! json_encode($lastTwoReadings) !!};

    if (lastTwoReadings) {
      previousReading = lastTwoReadings.latest_reading;
    }
    
    const updateCostRate = () => {
      consumption = READING.value - previousReading;
      if (CASH_PAYMENT_AMOUNT.value > 0 && consumption > 0) {
         COST_RATE.value = CASH_PAYMENT_AMOUNT.value / consumption;
      } else {
        COST_RATE.value = '';
      }
    }

    METRED_INPUT.addEventListener('change', e => {
      e.target.parentElement.parentElement.submit();
    });

    const READING = document.querySelector('input#reading');
    const CURRENT_RATE = document.querySelector('input#current_consumption_rate');
    
    let currentPeriodProduction = {!! json_encode($currentPeriodProduction) !!};
    
    
    READING.addEventListener('keyup', e => {
      consumption = e.target.value - previousReading;
      if (!currentPeriodProduction) {
        CURRENT_RATE.value = 'No production during the period';
      } else if (consumption < 0) {
        CURRENT_RATE.value = 'Reading lower than previous one';
      } else {
        CURRENT_RATE.value = consumption / currentPeriodProduction;
      }
      updateCostRate();      
    });

    const READ_AT_FILTER = document.querySelector('input#read_at_filter');
    const DATE_BASED_DATA = document.querySelector('button#date_based_data');

    READ_AT_FILTER.addEventListener('change', e => {
      DATE_BASED_DATA.classList.add('bg-red-600', 'text-white');
    }); 

    const CASH_PAYMENT_AMOUNT = document.querySelector('input#cash_payment_amount')
    const COST_RATE = document.querySelector('input#cost_rate')

    CASH_PAYMENT_AMOUNT.addEventListener('keyup', e => {
      if (READING.value > 0) {
        updateCostRate();
      }
    });
})
</script>

步骤3：重新编译前端资源 #

执行命令重新打包：
npm run dev
完成后清除浏览器缓存刷新页面测试即可。

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