✨ feat: 添加 dependency 注入支持

example/.umirc.ts

@@ -26,6 +26,11 @@ export default defineConfig({
       persistent: true,
     },
     contentScripts: [
+      {
+        matches: ['http://*/*', 'https://*/*'],
+        entries: ['jquery', 'require.js'],
+        runAt: 'document_end',
+      },
       {
         matches: ['https://github.com/*'],
         entries: ['@/contentScripts/github'],

example/package.json

@@ -1,4 +1,10 @@
 {
-  "dependencies": {},
+  "dependencies": {
+    "jquery": "^3.6.0",
+    "require.js": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.5"
+  },
   "version": "1.0.0"
 }

src/functions/contentScripts.ts

@@ -2,15 +2,15 @@ import { join } from 'path';
 import fse from 'fs-extra';
 
 import type { IApi } from 'umi';
-import { updateContentScripts } from '../utils';
+import { getDependencyPath, updateContentScripts } from '../utils';
 
 /**
  *  将 contentScripts 添加到打包对象中
  *  并在输出结果中添加 contentScripts 脚本
  * @param api
  */
 export default (api: IApi) => {
-  const { paths } = api.service;
+  const { paths, cwd } = api.service;
 
   // 修正 webpack 关于 contentScripts 的配置
   api.chainWebpack((config) => {
@@ -23,10 +23,10 @@ export default (api: IApi) => {
 
     // 将 contentScripts 作为一个入口插入打包对象中
     contentScripts.forEach((item, index) => {
-      const { entries } = item;
-
       const entry = `contentScript_${index}`;
 
+      const entries = item.entries.map((e) => getDependencyPath(e, cwd));
+
       config.entry(entry).merge(entries);
     });
 

src/utils/dependency.ts

@@ -0,0 +1,7 @@
+import { join } from 'path';
+
+export const getDependencyPath = (entry: string, cwd?: string) => {
+  return entry.startsWith('@/') || entry.startsWith('.')
+    ? entry
+    : join(cwd || process.cwd(), 'node_modules', entry);
+};

src/utils/index.ts

@@ -2,3 +2,4 @@ export * from './csp';
 export * from './env';
 export * from './route';
 export * from './manifest';
+export * from './dependency';

test/utils/dependency.spec.ts

@@ -0,0 +1,18 @@
+import { getDependencyPath } from '../../src/utils';
+
+describe('getDependencyPath', () => {
+  it('base', () => {
+    expect(getDependencyPath('jquery')).toEqual(
+      process.cwd() + '/node_modules/jquery',
+    );
+  });
+  it('with cwd', () => {
+    expect(getDependencyPath('jquery', '/hhh')).toEqual(
+      '/hhh/node_modules/jquery',
+    );
+  });
+  it('not modules', () => {
+    expect(getDependencyPath('@/jquery')).toEqual('@/jquery');
+    expect(getDependencyPath('./jquery')).toEqual('./jquery');
+  });
+});