Laravel+Webpack环境下内联JS模块运行问题求助

兄弟，我看你这问题是模块导出/导入语法不匹配加上没主动调用函数导致的，给你一步步捋清楚怎么解决：

先分析问题根源 #

1. 你写的revision.js用的是CommonJS规范的导出方式（module.exports = revision），但尝试用ES模块的命名导入（import { revision } from ...），这俩语法不兼容，所以会报错"The requested module '/js/revision.js' does not provide an export named 'revision'"。
2. 第二种方式直接引入模块脚本，但脚本里只定义并导出了函数，根本没主动调用它，自然不会有任何输出。

方案一：改用ES模块规范（推荐，符合现代JS趋势） #

把你的resources/assets/js/revision.js改成ES模块的导出方式：

方式A：默认导出

export default function revision() {
    console.log('Hello world'); // 顺便帮你把拼写错误的Hell改成Hello啦😉
}

然后在页面里用默认导入并调用函数：

<script type="module">
    import revision from '{{ asset('js/revision.js') }}';
    revision(); // 关键！必须调用函数才会执行输出
</script>

方式B：命名导出

如果想用命名导入的写法，可以这么定义：

export function revision() {
    console.log('Hello world');
}

对应页面里的命名导入：

<script type="module">
    import { revision } from '{{ asset('js/revision.js') }}';
    revision();
</script>

方案二：保持CommonJS导出，调整导入方式 #

如果不想修改JS文件的导出逻辑，也可以用ES模块的默认导入来接收CommonJS的导出（Webpack会自动处理这种兼容）：

<script type="module">
    import revision from '/js/revision.js';
    revision();
</script>

方案三：不使用模块，直接执行函数 #

如果你其实不需要模块化，只是想让代码运行，直接在脚本里调用函数就行：
修改revision.js：

var revision = function () { console.log('Hello world'); }; 
revision(); // 直接调用函数
module.exports = revision; // 保留导出（如果需要外部引用的话）

然后页面里不用type="module"，直接引入：

<script src="{{ asset('js/revision.js') }}"></script>

额外注意点 #

检查你的Webpack Mix配置：你写的是mix.js('resources/assets/revision.js', 'public/js/revision.js').version();，但源文件实际路径是resources/assets/js/revision.js，要确认路径一致，不然打包出来的文件可能不正确。

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