feat: global js ,global css (umijs#42)

* feat: global js ,global css

* fix: debug

* docs: todo

TODO.txt

@@ -10,8 +10,9 @@ umi-next:
 			https://github.com/umijs/umi-next/pull/27
 		- webpack-dev-server 功能查漏补缺 @ycjcl868
 	core:
-		- logger @ycjcl868 @done
-			https://github.com/umijs/umi-next/pull/26
+    - logger @ycjcl868 @done
+    - .env 环境变量加载、环境变量统一 Enum @ycjcl868 @done
+      https://github.com/umijs/umi-next/pull/26
 		- 插件里可感知命令行参数，通过 api.args @done @sorrycc
 		- logger 优化
 			比如插件层如何打日志？如何过滤日志？
@@ -24,7 +25,8 @@ umi-next:
 		- api.routes
 		- 添加 api.chainWebpackConfig，提供 chainWebpack 的配置 @done @sorrycc
 		- umi build ，hash 在 html 中未起效 @bug @done @ycjcl868
-	preset-built-in:
+  preset-built-in:
+    - 支持 global-css、global-js @ycjcl868 @done
 		dev & build:
 			- 支持 H5 的多页功能
 		dev:

packages/preset-built-in/src/fixtures/global-files/.umirc.js

@@ -0,0 +1,13 @@
+
+export default {
+  history: {
+    type: 'memory',
+    options: {
+      initialEntries: ['/'],
+    },
+  },
+  mountElementId: '',
+  routes: [
+    { path: '/', component: 'index' },
+  ],
+}

packages/preset-built-in/src/fixtures/global-files/src/global.css

@@ -0,0 +1,3 @@
+.h1 {
+  color: red;
+}

packages/preset-built-in/src/fixtures/global-files/src/global.js

@@ -0,0 +1 @@
+window.customUtil = (str) => str;

packages/preset-built-in/src/fixtures/global-files/src/pages/index.jsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <h1 className="h1">{window.customUtil('hello Global')}</h1>

packages/preset-built-in/src/index.test.ts

@@ -1,10 +1,13 @@
 import { Service } from '@umijs/core';
 import { join } from 'path';
+import { render, cleanup } from '@testing-library/react';
 import { rimraf } from '@umijs/utils';
 import { readFileSync } from 'fs';
 
 const fixtures = join(__dirname, 'fixtures');
 
+afterEach(cleanup);
+
 test('api.writeTmpFile error in register stage', async () => {
   const cwd = join(fixtures, 'api-writeTmpFile');
   const service = new Service({
@@ -32,3 +35,20 @@ test('api.writeTmpFile', async () => {
   expect(readFileSync(tmpFile, 'utf-8')).toEqual('foo');
   rimraf.sync(tmpFile);
 });
+
+test('global js', async () => {
+  const cwd = join(fixtures, 'global-files');
+  const service = new Service({
+    cwd,
+    presets: [require.resolve('./index.ts')],
+  });
+  await service.run({
+    name: 'g',
+    args: {
+      _: ['g', 'tmp'],
+    },
+  });
+  const reactNode = require(join(cwd, 'src', '.umi-test', 'umi.ts')).default;
+  const { container } = render(reactNode);
+  expect(container.textContent).toEqual('hello Global');
+});

packages/preset-built-in/src/index.ts

@@ -6,6 +6,8 @@ export default function() {
 
       // misc
       require.resolve('./plugins/routes'),
+      require.resolve('./plugins/features/global-js'),
+      require.resolve('./plugins/features/global-css'),
 
       // generate files
       require.resolve('./plugins/generateFiles/core/history'),

packages/preset-built-in/src/plugins/features/global-css.ts

@@ -0,0 +1,31 @@
+import { relative } from 'path';
+import { IApi } from '@umijs/types';
+import { createDebug } from '@umijs/utils';
+import { getGlobalFile } from '../utils';
+
+const debug = createDebug('umi:preset-build-in:global-css');
+
+export default (api: IApi) => {
+  const {
+    paths,
+    utils: { winPath },
+  } = api;
+  const { absSrcPath = '', absTmpPath = '' } = paths;
+  const files = [
+    'global.css',
+    'global.less',
+    'global.scss',
+    'global.sass',
+    'global.styl',
+    'global.stylus',
+  ];
+  const globalCSSFile = getGlobalFile({ absSrcPath, files });
+  debug('globalCSSFile', globalCSSFile);
+
+  api.addEntryCodeAhead(
+    () => `
+    ${globalCSSFile
+      .map(file => `require('${winPath(relative(absTmpPath, file))}');`)
+      .join('')}`,
+  );
+};

packages/preset-built-in/src/plugins/features/global-js.ts

@@ -0,0 +1,20 @@
+import { relative } from 'path';
+import { IApi } from '@umijs/types';
+import { createDebug } from '@umijs/utils';
+import { getGlobalFile } from '../utils';
+
+const debug = createDebug('umi:preset-build-in:global-js');
+
+export default (api: IApi) => {
+  const { paths } = api;
+  const { absSrcPath = '', absTmpPath = '' } = paths;
+  const files = ['global.tsx', 'global.ts', 'global.jsx', 'global.js'];
+  const globalJSFile = getGlobalFile({ absSrcPath, files });
+  debug('globalJSFile', globalJSFile);
+
+  api.addEntryImportsAhead(() =>
+    globalJSFile.map(file => ({
+      source: relative(absTmpPath, file),
+    })),
+  );
+};

packages/preset-built-in/src/plugins/utils.test.ts

@@ -0,0 +1,16 @@
+import fs from 'fs';
+import { join } from 'path';
+import { winPath } from '@umijs/utils';
+import { getGlobalFile } from './utils';
+
+test('getGlobalFile', () => {
+  const existsSyncMock = jest
+    .spyOn(fs, 'existsSync')
+    .mockImplementation(res => true);
+  const files = getGlobalFile({
+    files: ['global.ts', 'global.tsx', 'global.js'],
+    absSrcPath: winPath(__dirname),
+  });
+  expect(files).toEqual([join(winPath(__dirname), 'global.ts')]);
+  existsSyncMock.mockRestore();
+});

packages/preset-built-in/src/plugins/utils.ts

@@ -0,0 +1,19 @@
+import { existsSync } from 'fs';
+import { join } from 'path';
+
+type IGetGlobalFile = (opts: {
+  absSrcPath: string;
+  files: string[];
+}) => string[];
+
+/**
+ * get global file like (global.js, global.css)
+ * @param absSrcPath
+ * @param files default load global files
+ */
+export const getGlobalFile: IGetGlobalFile = ({ absSrcPath, files }) => {
+  return files
+    .map(file => join(absSrcPath || '', file))
+    .filter(file => existsSync(file))
+    .slice(0, 1);
+};