blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity

refactor: 重新设计build加载方式

Browse Source
This commit is contained in:
wanchun 2022-05-11 17:50:20 +08:00
parent 553e604dc6
commit 71788348b2
18 changed files with 114 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -6,6 +6,7 @@
.cache
.temp
.hound
.fes
dist
*.log
node_modules
@ -14,7 +15,6 @@ npm-debug.log
/packages/fes-doc/docs/.vuepress/dist
/packages/fes-template/package-lock.json
/.changelog
/packages/*/lib
/packages/*/es
/packages/*/dist

2
build.config.js
View File

@ -3,6 +3,7 @@ module.exports = {
'create-fes-app',
'fes',
'fes-compiler',
'fes-preset-built-in',
'fes-build-vite',
'fes-build-webpack',
'fes-runtime',
@ -20,7 +21,6 @@ module.exports = {
'fes-plugin-sass',
'fes-plugin-vuex',
'fes-plugin-pinia',
'fes-preset-built-in',
'fes-plugin-windicss',
],
copy: [],

1
packages/fes-build-vite/src/index.js
View File

@ -1,6 +1,7 @@
export default function () {
return {
plugins: [
require.resolve('./registerBuilder'),
require.resolve('./registerMethods'),
require.resolve('./registerType'),

5
packages/fes-build-vite/src/registerBuilder.js Normal file
View File

@ -0,0 +1,5 @@
export default function (api) {
api.registerBuilder({
name: 'vite',
});
}

2
packages/fes-build-webpack/src/index.js
View File

@ -1,6 +1,8 @@
export default function () {
return {
plugins: [
require.resolve('./plugins/registerBuilder'),
// register methods
require.resolve('./plugins/registerMethods'),
require.resolve('./plugins/registerType'),

5
packages/fes-build-webpack/src/plugins/registerBuilder.js Normal file
View File

@ -0,0 +1,5 @@
export default function (api) {
api.registerBuilder({
name: 'webpack',
});
}

10
packages/fes-compiler/src/service/index.js
View File

@ -9,7 +9,7 @@ import { AsyncSeriesWaterfallHook } from 'tapable';
import { existsSync } from 'fs';
import { lodash, chalk } from '@fesjs/utils';
import { Command, Option } from 'commander';
import { resolvePresets, filterBuilder, pathToObj, resolvePlugins } from './utils/pluginUtils';
import { resolvePresets, pathToObj, resolvePlugins } from './utils/pluginUtils';
import loadDotEnv from './utils/loadDotEnv';
import isPromise from './utils/isPromise';
import BabelRegister from './babelRegister';
@ -38,6 +38,9 @@ export default class Service extends EventEmitter {
// including plugins
plugins = {};
// 构建
builder = {};
// plugin methods
pluginMethods = {};
@ -89,11 +92,6 @@ export default class Service extends EventEmitter {
this.env = opts.env || process.env.NODE_ENV;
this.fesPkg = opts.fesPkg || {};
const builderPkgPath = filterBuilder(this.pkg);
this.builder = {
isVite: (builderPkgPath[0] || '').includes('build-vite'),
};
assert(existsSync(this.cwd), `cwd ${this.cwd} does not exist.`);
// register babel before config parsing

129
packages/fes-compiler/src/service/pluginAPI.js
View File

@ -21,21 +21,14 @@ export default class PluginAPI {
}
// TODO: reversed keys
describe({
id,
key,
config,
enableBy
} = {}) {
describe({ id, key, config, enableBy } = {}) {
const { plugins } = this.service;
// this.id and this.key is generated automatically
// so we need to diff first
if (id && this.id !== id) {
if (plugins[id]) {
const name = plugins[id].isPreset ? 'preset' : 'plugin';
throw new Error(
`api.describe() failed, ${name} ${id} is already registered by ${plugins[id].path}.`
);
throw new Error(`api.describe() failed, ${name} ${id} is already registered by ${plugins[id].path}.`);
}
plugins[id] = plugins[this.id];
plugins[id].id = id;
@ -55,54 +48,35 @@ export default class PluginAPI {
}
register(hook) {
assert(
hook.key && typeof hook.key === 'string',
`api.register() failed, hook.key must supplied and should be string, but got ${hook.key}.`
);
assert(
hook.fn && typeof hook.fn === 'function',
`api.register() failed, hook.fn must supplied and should be function, but got ${hook.fn}.`
);
this.service.hooksByPluginId[this.id] = (
this.service.hooksByPluginId[this.id] || []
).concat(hook);
assert(hook.key && typeof hook.key === 'string', `api.register() failed, hook.key must supplied and should be string, but got ${hook.key}.`);
assert(hook.fn && typeof hook.fn === 'function', `api.register() failed, hook.fn must supplied and should be function, but got ${hook.fn}.`);
this.service.hooksByPluginId[this.id] = (this.service.hooksByPluginId[this.id] || []).concat(hook);
}
registerCommand(commandOption) {
const { command, fn } = commandOption;
assert(
!this.service.commands[command],
`api.registerCommand() failed, the command ${command} is exists.`
);
assert(
typeof command === 'string',
'api.registerCommand() failed, the command must be String.'
);
assert(
typeof fn === 'function',
'api.registerCommand() failed, the fn must be function.'
);
assert(!this.service.commands[command], `api.registerCommand() failed, the command ${command} is exists.`);
assert(typeof command === 'string', 'api.registerCommand() failed, the command must be string.');
assert(typeof fn === 'function', 'api.registerCommand() failed, the fn must be function.');
this.service.commands[command] = commandOption;
}
// 在 preset 初始化阶段放后面，在插件注册阶段放前面
registerPlugins(plugins) {
assert(
this.service.stage === ServiceStage.initPresets
|| this.service.stage === ServiceStage.initPlugins,
'api.registerPlugins() failed, it should only be used in registering stage.'
this.service.stage === ServiceStage.initPresets || this.service.stage === ServiceStage.initPlugins,
'api.registerPlugins() failed, it should only be used in registering stage.',
);
assert(
Array.isArray(plugins),
'api.registerPlugins() failed, plugins must be Array.'
assert(Array.isArray(plugins), 'api.registerPlugins() failed, plugins must be Array.');
const extraPlugins = plugins.map((plugin) =>
isValidPlugin(plugin)
? plugin
: pathToObj({
type: PluginType.plugin,
path: plugin,
cwd: this.service.cwd,
}),
);
const extraPlugins = plugins.map(plugin => (isValidPlugin(plugin)
? (plugin)
: pathToObj({
type: PluginType.plugin,
path: plugin,
cwd: this.service.cwd
})));
if (this.service.stage === ServiceStage.initPresets) {
this.service._extraPlugins.push(...extraPlugins);
} else {
@ -111,50 +85,49 @@ export default class PluginAPI {
}
registerPresets(presets) {
assert(
this.service.stage === ServiceStage.initPresets,
'api.registerPresets() failed, it should only used in presets.'
assert(this.service.stage === ServiceStage.initPresets, 'api.registerPresets() failed, it should only used in presets.');
assert(Array.isArray(presets), 'api.registerPresets() failed, presets must be Array.');
const extraPresets = presets.map((preset) =>
isValidPlugin(preset)
? preset
: pathToObj({
type: PluginType.preset,
path: preset,
cwd: this.service.cwd,
}),
);
assert(
Array.isArray(presets),
'api.registerPresets() failed, presets must be Array.'
);
const extraPresets = presets.map(preset => (isValidPlugin(preset)
? (preset)
: pathToObj({
type: PluginType.preset,
path: preset,
cwd: this.service.cwd
})));
// 插到最前面，下个 while 循环优先执行
this.service._extraPresets.splice(0, 0, ...extraPresets);
}
registerMethod({
name,
fn,
exitsError = true
}) {
registerMethod({ name, fn, exitsError = true }) {
if (this.service.pluginMethods[name]) {
if (exitsError) {
throw new Error(
`api.registerMethod() failed, method ${name} is already exist.`
);
throw new Error(`api.registerMethod() failed, method ${name} is already exist.`);
} else {
return;
}
}
this.service.pluginMethods[name] = fn
// 这里不能用 arrow function，this 需指向执行此方法的 PluginAPI
// 否则 pluginId 会不会，导致不能正确 skip plugin
|| function (hookFn) {
const hook = {
key: name,
...(utils.lodash.isPlainObject(hookFn) ? hookFn : { fn: hookFn })
};
// @ts-ignore
this.register(hook);
};
this.service.pluginMethods[name] =
fn ||
// 这里不能用 arrow function，this 需指向执行此方法的 PluginAPI
// 否则 pluginId 会不会，导致不能正确 skip plugin
function (hookFn) {
const hook = {
key: name,
...(utils.lodash.isPlainObject(hookFn) ? hookFn : { fn: hookFn }),
};
// @ts-ignore
this.register(hook);
};
}
registerBuilder(builder) {
assert(typeof builder === 'object', 'api.registerBuilder() failed, the builder must be object.');
const { name } = builder;
assert(typeof name === 'string', 'api.registerBuilder() failed, the builder.name must be string.');
assert(typeof this.service.builder.name !== 'string', `检测到您使用了 builder: ${name}，已经加载 builder: ${this.service.builder.name}， 请保留一个`);
this.service.builder = builder;
}
skipPlugins(pluginIds) {

49
packages/fes-compiler/src/service/utils/pluginUtils.js
View File

@ -1,14 +1,11 @@
import { dirname, join, basename, relative, extname } from 'path';
import { compatESModuleRequire, resolve, winPath, pkgUp, lodash } from '@fesjs/utils';
import Logger from '../../logger';
import { PluginType } from '../enums';
const logger = new Logger('fes:compiler');
const RE = {
[PluginType.plugin]: /^(@fesjs\/|@webank\/fes-|fes-)plugin-/,
[PluginType.preset]: /^(@fesjs\/|@webank\/fes-|fes-)preset-/,
[PluginType.preset]: /^(@fesjs\/|@webank\/fes-|fes-)(preset|build)-/,
};
export function isPluginOrPreset(type, name) {
@ -26,18 +23,6 @@ function filterPluginAndPreset(type, pkg) {
.filter(isPluginOrPreset.bind(null, type));
}
export function filterBuilder(pkg) {
const builders = Object.keys(pkg.devDependencies || {})
.concat(Object.keys(pkg.dependencies || {}))
.filter((name) => /^@fesjs\/build-/.test(name));
if (builders.length > 1) {
logger.warn(`检测到您使用了多个个 builder: ${builders}，当前生效的是 ${builders[0]}, 请保留一个`);
}
return builders.slice(0, 1);
}
export function getPluginsOrPresets(type, opts) {
const upperCaseType = type.toUpperCase();
return [
@ -46,8 +31,6 @@ export function getPluginsOrPresets(type, opts) {
// env
...(process.env[`FES_${upperCaseType}S`] || '').split(',').filter(Boolean),
...filterPluginAndPreset(type, opts.pkg),
// 构建只允许是 presets
...(type === PluginType.preset ? filterBuilder(opts.pkg) : []),
// user config
...(opts[type === PluginType.preset ? 'userConfigPresets' : 'userConfigPlugins'] || []),
].map((path) =>
@ -122,13 +105,29 @@ export function pathToObj({ path, type, cwd }) {
export function resolvePresets(opts) {
const type = PluginType.preset;
const presets = [...getPluginsOrPresets(type, opts)];
return presets.map((path) =>
pathToObj({
type,
path,
cwd: opts.cwd,
}),
);
return presets
.map((path) =>
pathToObj({
type,
path,
cwd: opts.cwd,
}),
)
.sort((a, b) => {
if (a.id === '@fesjs/preset-built-in') {
return -1;
}
if (b.id === '@fesjs/preset-built-in') {
return 1;
}
if (/^(@fesjs\/|@webank\/fes-|fes-)build-/.test(a.id)) {
return -1;
}
if (/^(@fesjs\/|@webank\/fes-|fes-)build-/.test(b.id)) {
return 1;
}
return 0;
});
}
export function resolvePlugins(opts) {

2
packages/fes-plugin-monaco-editor/src/index.js
View File

@ -74,7 +74,7 @@ export default (api) => {
api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
if (api.builder.isVite) {
if (api.builder.name === 'vite') {
api.modifyBundleConfig((config) => {
const monacoEditorPlugin = require('vite-plugin-monaco-editor').default;
config?.plugins?.push(monacoEditorPlugin(api.config?.monacoEditor || {}));

2
packages/fes-plugin-qiankun/src/micro/index.js
View File

@ -19,7 +19,7 @@ export default function (api) {
enableBy: () => isSlaveEnable(api),
});
if (api.builder.isVite) {
if (api.builder.name === 'vite') {
// 处理
} else {
api.modifyDefaultConfig((memo) => {

2
packages/fes-plugin-sass/src/index.js
View File

@ -17,7 +17,7 @@ export default (api) => {
},
});
if (api.builder.isVite) {
if (api.builder.name === 'vite') {
// vite 不需要处理
} else {
api.chainWebpack((memo, { createCSSRule }) => {

2
packages/fes-plugin-windicss/src/index.js
View File

@ -61,7 +61,7 @@ export default (api) => {
api.addEntryImportsAhead(() => [{ source: 'windi-base.css' }, { source: 'windi-components.css' }, { source: 'windi-utilities.css' }]);
if (api.builder.isVite) {
if (api.builder.name === 'vite') {
buildWindicssWithVite(api);
} else {
buildWindicssWithWebpack(api);

1
packages/fes-preset-built-in/src/index.js
View File

@ -24,6 +24,7 @@ export default function () {
require.resolve('./plugins/features/mock'),
require.resolve('./plugins/features/outputPath'),
require.resolve('./plugins/features/plugins'),
require.resolve('./plugins/features/presets'),
require.resolve('./plugins/features/proxy'),
require.resolve('./plugins/features/publicPath'),
require.resolve('./plugins/features/singular'),

10
packages/fes-preset-built-in/src/plugins/features/presets.js Normal file
View File

@ -0,0 +1,10 @@
export default (api) => {
api.describe({
key: 'presets',
config: {
schema(joi) {
return joi.array().items(joi.string());
},
},
});
};

1
packages/fes-preset-built-in/types.d.ts vendored
View File

@ -77,6 +77,7 @@ export interface InnerBuildConfig {
};
mountElementId?: string;
plugins?: string[];
presets?: string[];
proxy?: {
[apiPrefix: string]: {
target: string;

5
packages/fes-template/.fes.js
View File

@ -91,5 +91,8 @@ export default {
dynamicImport: true,
monacoEditor: {
languages: ['javascript', 'typescript', 'html', 'json']
}
},
presets: [
require.resolve('../fes-build-webpack/lib'),
]
};

1
packages/fes-template/package.json
View File

@ -58,7 +58,6 @@
"@fesjs/plugin-windicss": "^2.0.0",
"@fesjs/plugin-pinia": "^2.0.0",
"@fesjs/fes-design": "^0.3.3",
"@fesjs/build-webpack": "^1.0.0",
"vue": "^3.0.5",
"vuex": "^4.0.0",
"pinia": "^2.0.11"