如何在SharePoint Web Part中正确配置使用unified.js？

报错原因拆解 #

• Unexpected token 'export'：你将unified配置为externals时，直接引用了node_modules里的ES模块文件，但SharePoint旧版webpack工具链无法处理未转译的ES模块，导致浏览器解析失败。
• Can't resolve 'devlop'：unified@11.x依赖devlop作为调试依赖，你的项目未安装该包，旧版webpack不会自动拉取peer依赖。

分步解决配置 #

1. 降级unified版本（核心修复） #

你的TypeScript 4.7.4版本不兼容unified@11.x（要求TS 5.x+），建议降级到兼容的unified@10.1.2：

npm uninstall unified
npm install unified@10.1.2

2. 删除错误的externals配置 #

SharePoint Web Part需要把依赖打包进bundle，不要把unified设为externals。删掉config/config.json里externals节点下的unified相关配置。

3. 标准导入语句 #

在TS文件里用正常的ES模块导入：

import { unified } from 'unified';

如果要搭配插件（比如remark系列），直接导入即可：

import remarkParse from 'remark-parse';
import remarkStringify from 'remark-stringify';

4. 修正TypeScript配置 #

unified自带index.d.ts类型文件，无需手动创建。调整tsconfig.json确保以下配置：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES5",
    "lib": ["ES2015", "DOM"],
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "types": [
    "webpack-env"
    // 不用加"unified"，TS会自动识别node_modules里的类型文件
  ]
}

5. 补装缺失依赖 #

如果还有devlop找不到的报错，安装这个依赖：

npm install devlop --save-dev

疑问解答 #

1. unified自带类型文件还要手动写吗？
   不用，TS会自动扫描node_modules中的类型声明，只要skipLibCheck没设为true，就能正常识别类型。
2. 必须用unified旧版本吗？
   是的，你的TS版本低于unified@11.x的最低要求，降级到10.x版本能完美适配你的旧工具链，避免类型和构建问题。

验证 #

运行构建命令确认问题解决：

gulp build
gulp serve

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