如何在Laravel应用中使用npm安装的包？以Wysimark编辑器为例

API 探路者

2026-7-16

解决Laravel中Wysimark编辑器引用报错问题

第一步：正确引入前端资源到视图

Laravel默认使用Vite管理前端资源，你需要在视图文件（比如布局文件resources/views/layouts/app.blade.php或具体页面视图）中添加资源引入代码：

如果用Vite（Laravel 9+默认），在视图的<head>或</body>标签前添加：
```
@vite('resources/js/app.js')
```

如果是旧版本用Mix，添加：

<script src="{{ mix('js/app.js') }}"></script>

第二步：修复`createWysimark未定义`的错误

ES模块中的import变量默认是局部作用域，不会暴露到全局window对象，所以直接在视图中调用会报错。解决方法二选一：

方法1：将方法挂载到全局window

修改resources/js/app.js：

import { createWysimark } from "@wysimark/standalone";
// 挂载到全局，让视图能直接调用
window.createWysimark = createWysimark;

方法2：在app.js中直接初始化编辑器

不用在视图里调用，直接在app.js中完成初始化（更符合模块化规范）：

import { createWysimark } from "@wysimark/standalone";

// 等待DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  // 替换成你页面中要挂载编辑器的元素ID
  const editorContainer = document.getElementById('wysimark-editor');
  if (editorContainer) {
    createWysimark(editorContainer);
  }
});