Merge pull request #178 from arvinxx/beta

支持 contentScript 添加依赖

Author: arvinxx

.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - master
+      - beta
 
 jobs:
   release:
@@ -24,7 +25,8 @@ jobs:
       - name: Lint
         run: yarn lint && yarn tsc
 
-      - run: yarn test
+      - name: Test
+        run: yarn build && yarn test
 
       - name: release
         run: yarn release

.github/workflows/test.yml

@@ -21,7 +21,7 @@ jobs:
         run: yarn lint && yarn tsc
 
       - name: test
-        run: yarn test:coverage
+        run: yarn build && yarn test:coverage
 
       - name: Generate coverage
         run: bash <(curl -s https://codecov.io/bash)

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [0.6.0-beta.1](https://github.com/arvinxx/umi-plugin-extensions/compare/v0.5.0...v0.6.0-beta.1) (2021-04-25)
+
+
+### ✨ Features
+
+* 添加 dependency 注入支持 ([bef3ff6](https://github.com/arvinxx/umi-plugin-extensions/commit/bef3ff6))
+
 # [0.5.0](https://github.com/arvinxx/umi-plugin-extensions/compare/v0.4.1...v0.5.0) (2021-04-16)
 
 

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"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umi-plugin-extensions",
-  "version": "0.5.0",
+  "version": "0.6.0-beta.1",
   "main": "lib/index.js",
   "description": "a umi plugin to build chrome extensions",
   "authors": {
@@ -91,7 +91,7 @@
     "cross-env": "^7.0.3",
     "eslint": "^7.7.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^2.2.1",
+    "eslint-import-resolver-typescript": "^2.4.0",
     "express": "^4.15.3",
     "father-build": "^1.19.1",
     "gh-pages": "^3.1.0",
@@ -112,6 +112,6 @@
     "typedoc-plugin-external-module-map": "^1.2.1",
     "typedoc-plugin-markdown": "^3.6.0",
     "typescript": "^4.2.3",
-    "umi": "^3.4.8"
+    "umi": "^3.4.11"
   }
 }

src/functions/contentScripts.test.ts

@@ -1,6 +1,6 @@
 import { join } from 'path';
 import { Service } from 'umi';
-import { render } from '@testing-library/react';
+import { readFileSync } from 'fs';
 
 const fixtures = join(__dirname, '../fixtures');
 
@@ -18,8 +18,6 @@ test('normal tmp', async () => {
     },
   });
 
-  // eslint-disable-next-line global-require,import/no-dynamic-require
-  const reactNode = require(join(cwd, '.umi-test', 'umi.ts')).default;
-  const { container } = render(reactNode);
-  expect(container.textContent).toEqual('');
+  const html = readFileSync(join(cwd, 'dist', 'index.html'), 'utf-8');
+  expect(html).toContain('root');
 });

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/index.test.ts

@@ -1,6 +1,6 @@
 import { join } from 'path';
 import { Service } from 'umi';
-import { render } from '@testing-library/react';
+import { readFileSync } from 'fs';
 
 const fixtures = join(__dirname, './fixtures');
 
@@ -18,8 +18,6 @@ test('normal tmp', async () => {
     },
   });
 
-  // eslint-disable-next-line global-require,import/no-dynamic-require
-  const reactNode = require(join(cwd, '.umi-test', 'umi.ts')).default;
-  const { container } = render(reactNode);
-  expect(container.textContent).toEqual('');
+  const html = readFileSync(join(cwd, 'dist', 'index.html'), 'utf-8');
+  expect(html).toContain('root');
 });

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');
+  });
+});