如何修复Laravel/Blade/jQuery/Bootstrap项目中引入autoNumeric的错误？

问题根源 #

你遇到的报错核心原因是：直接引入了AutoNumeric的ES6模块源码文件，浏览器无法直接解析源码里的import语句——这些源码是用于构建编译的原始文件，必须经过打包处理才能在浏览器环境中正常运行，不能直接拿来用。

正确的两种实现方式 #

方式一：用npm安装（推荐，贴合Laravel前端工作流）

1. 在项目根目录打开终端，执行安装命令：

   npm install autonumeric
   

2. 打开resources/js/bootstrap.js，添加一行代码把AutoNumeric挂载到全局window对象，方便在页面中调用：

   window.AutoNumeric = require('autonumeric');
   

3. 编译前端资源：

   # 开发环境（未压缩，方便调试）
   npm run dev
   # 生产环境（压缩代码，优化加载速度）
   npm run prod
   

4. 在你的blade视图的@section('scripts')区块中，确保已经引入了编译后的app.js（Laravel默认布局会自动引入，也可手动添加），然后在jQuery就绪回调里初始化：

   $(document).ready(function() {
       // 第二个参数传空对象表示使用默认配置，也可根据需求自定义配置项
       new AutoNumeric('#selling_range', {});
   });
   

方式二：直接使用编译好的浏览器版本

如果不想用npm管理依赖，也可以直接用官方预编译好的、可直接在浏览器运行的文件：

1. 找到AutoNumeric官方提供的dist目录，下载里面的autonumeric.min.js（压缩版）或autonumeric.js（未压缩版）
2. 把下载好的文件上传到你的public/js/AutoNumeric目录下
3. 在blade的@section('scripts')里替换原来的源码引入，改为这个编译好的文件：

   <script src="{{ asset('js/AutoNumeric/autonumeric.min.js') }}"></script>
   

4. 同样在jQuery就绪回调里完成初始化：

   $(document).ready(function() {
       new AutoNumeric('#selling_range', {});
   });
   

额外注意事项 #

• 务必保证jQuery在AutoNumeric之前加载，因为AutoNumeric依赖jQuery才能正常工作
• 检查文件路径是否正确，可在浏览器控制台查看asset()生成的URL是否能正常加载对应文件
• 初始化时的第二个参数如果不需要自定义配置，传{}比null更稳妥，能避免潜在的参数解析问题

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