Laravel7项目无法通过npm导入/引用Node模块问题求助

环境信息 #

• Laravel 7
• npm 8.15.0
• Node.js v14.17.1

问题本质 #

你遇到的两个错误根源很明确：

1. 浏览器原生ES模块（<script type="module">）不允许直接引用my_new_package这种裸模块名，必须使用相对/绝对路径；
2. require()是Node.js专属的CommonJS语法，浏览器没有内置这个函数，自然无法识别。

直接在浏览器里引用npm包行不通，必须通过打包工具把npm包和你的代码合并成浏览器能直接运行的文件，Laravel 7默认用Laravel Mix来做这件事。

具体解决步骤 #

1. 保留ES6 import语法修改业务文件 #

不用改动filename.js里的import语句，保持原样即可：

import { Roulette } from "my_new_package";

// 这里写你的业务逻辑，比如初始化实例
// const roulette = new Roulette(你的配置参数);

2. 配置Laravel Mix #

打开项目根目录的webpack.mix.js，确保你的filename.js被加入编译列表：

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

// 把resources下的filename.js编译到public/js目录
mix.js('resources/js/filename.js', 'public/js')
   // 若有SCSS/CSS需要编译则保留此行，无需求可删除
   .sass('resources/sass/app.scss', 'public/css');

3. 重新编译前端资源 #

在终端运行编译命令：

# 开发环境用此命令，编译速度快且带源码映射
npm run dev

# 生产环境用此命令，会自动压缩优化代码
npm run production

4. 更新页面的脚本引用 #

把原来的模块脚本改成引用编译后的文件，无需再写type="module"：

<script src="/js/filename.js"></script>

补充说明 #

• 你能正常引入同目录的./different_file.js，是因为这是相对路径，浏览器原生ES模块支持这种写法，但npm包不在浏览器的路径解析范围内，所以必须经过打包处理。
• 如果你的项目之前已经在用Mix打包其他JS文件，只需要把filename.js加到Mix的js()方法里即可，无需额外配置。

内容的提问来源于stack exchange，提问作者The Blind Hawk