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: 抽离 webpack 构建

Browse Source
This commit is contained in:
winixt 2022-03-26 20:24:14 +08:00
parent c04148f84d
commit 99db87e400
105 changed files with 1271 additions and 1434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
build.config.js
View File

@ -1,4 +1,3 @@
module.exports = {
// 需要编译的包
pkgs: [
@ -21,7 +20,8 @@ module.exports = {
'fes-preset-built-in',
'fes-plugin-windicss',
'fes-runtime',
'fes-utils'
'fes-utils',
'fes-build-webpack',
],
copy: []
copy: [],
};

21
packages/fes-build-vite/LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020-present webank
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

5
packages/fes-build-vite/README.md Normal file
View File

@ -0,0 +1,5 @@
# Fes.js vite 构建

35
packages/fes-build-vite/package.json Normal file
View File

@ -0,0 +1,35 @@
{
"name": "@fesjs/build-vite",
"version": "2.0.22",
"description": "@fesjs/build-vite",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"files": [
"lib"
],
"repository": {
"type": "git",
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
"directory": "packages/fes-build-vite"
},
"keywords": [
"fes"
],
"author": "qlin",
"license": "MIT",
"bugs": {
"url": "https://github.com/WeBankFinTech/fes.js/issues"
},
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
"publishConfig": {
"access": "public"
},
"dependencies": {
"@vitejs/plugin-vue": "^2.2.4",
"@vitejs/plugin-vue-jsx": "^1.3.8",
"vite": "^2.8.6"
},
"peerDependencies": {
"@vue/compiler-sfc": "^3.0.5"
}
}

0
packages/fes-preset-built-in/src/plugins/commands/dev/SFCConfigBlockPlugin.js → packages/fes-build-vite/src/SFCConfigBlockPlugin.js
View File

100
packages/fes-build-vite/src/dev.js Normal file
View File

@ -0,0 +1,100 @@
import { createServer } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import SFCConfigBlockPlugin from './SFCConfigBlockPlugin';
const assert = require('assert');
export default (api) => {
const {
env,
paths,
utils: { chalk },
} = api;
const unwatchs = [];
let port;
let hostname;
let server;
function destroy() {
for (const unwatch of unwatchs) {
unwatch();
}
server?.close();
}
api.registerCommand({
command: 'dev',
description: 'start a local http service for development',
options: [
{
name: '--port',
description: 'http service port, like 8080',
},
{
name: '--https',
description: 'whether to turn on the https service',
},
],
async fn() {
server = await createServer({
mode: 'development',
plugins: [vue(), SFCConfigBlockPlugin, vueJsx()],
configFile: false,
resolve: {
alias: {
'@': paths.absSrcPath,
'@@': paths.absTmpPath,
'@fesInner': '/',
},
},
server: {
port: 8000,
},
});
await server.listen();
server.printUrls();
return {
destroy,
};
},
});
api.registerMethod({
name: 'getPort',
fn() {
assert(env === 'development', 'api.getPort() is only valid in development.');
return port;
},
});
api.registerMethod({
name: 'getHostname',
fn() {
assert(env === 'development', 'api.getHostname() is only valid in development.');
return hostname;
},
});
api.registerMethod({
name: 'getServer',
fn() {
assert(env === 'development', 'api.getServer() is only valid in development.');
return server;
},
});
api.registerMethod({
name: 'restartServer',
fn() {
console.log(chalk.gray('Try to restart dev server...'));
destroy();
process.send({
type: 'RESTART',
});
},
});
};

21
packages/fes-build-webpack/LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020-present webank
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

5
packages/fes-build-webpack/README.md Normal file
View File

@ -0,0 +1,5 @@
# Fes.js webpack 构建

76
packages/fes-build-webpack/package.json Normal file
View File

@ -0,0 +1,76 @@
{
"name": "@fesjs/build-webpack",
"version": "1.0.0",
"description": "@fesjs/build-webpack",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"files": [
"lib"
],
"repository": {
"type": "git",
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
"directory": "packages/fes-build-webpack"
},
"keywords": [
"fes"
],
"author": "qlin",
"license": "MIT",
"bugs": {
"url": "https://github.com/WeBankFinTech/fes.js/issues"
},
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
"publishConfig": {
"access": "public"
},
"dependencies": {
"@babel/core": "^7.12.13",
"@babel/plugin-proposal-do-expressions": "^7.12.13",
"@babel/plugin-proposal-export-default-from": "^7.12.13",
"@babel/plugin-proposal-function-bind": "^7.12.13",
"@babel/plugin-proposal-pipeline-operator": "^7.12.13",
"@babel/plugin-transform-runtime": "^7.12.13",
"@babel/preset-env": "^7.12.13",
"@babel/preset-typescript": "^7.15.0",
"@fesjs/compiler": "^2.0.5",
"@fesjs/utils": "^2.0.4",
"@soda/friendly-errors-webpack-plugin": "^1.8.0",
"@vue/babel-plugin-jsx": "^1.0.2",
"autoprefixer": "^10.2.4",
"babel-loader": "^8.2.2",
"babel-plugin-import": "1.13.3",
"cli-highlight": "^2.1.4",
"cliui": "7.0.4",
"connect-history-api-fallback": "^1.6.0",
"copy-webpack-plugin": "^7.0.0",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^3.0.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.0.0",
"html-webpack-tags-plugin": "^3.0.0",
"less": "3.9.0",
"less-loader": "^8.0.0",
"mini-css-extract-plugin": "^1.3.5",
"postcss": "8.3.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^4.2.0",
"postcss-safe-parser": "^5.0.2",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"vue-loader": "^16.1.2",
"webpack": "^5.24.2",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-chain": "^6.5.1",
"webpack-dev-server": "^3.11.2",
"webpackbar": "^5.0.0-3"
},
"peerDependencies": {
"@vue/compiler-sfc": "^3.0.5",
"core-js": "^3.8.3"
},
"devDependencies": {
"core-js": "^3.8.3"
}
}

37
packages/fes-build-webpack/src/index.js Normal file
View File

@ -0,0 +1,37 @@
export default function () {
return {
plugins: [
// bundle configs
require.resolve('./plugins/features/alias'),
require.resolve('./plugins/features/analyze'),
require.resolve('./plugins/features/autoprefixer'),
require.resolve('./plugins/features/chainWebpack'),
require.resolve('./plugins/features/cssLoader'),
require.resolve('./plugins/features/copy'),
require.resolve('./plugins/features/define'),
require.resolve('./plugins/features/devServer'),
require.resolve('./plugins/features/devtool'),
require.resolve('./plugins/features/externals'),
require.resolve('./plugins/features/exportStatic'),
require.resolve('./plugins/features/extraBabelPlugins'),
require.resolve('./plugins/features/extraBabelPresets'),
require.resolve('./plugins/features/extraPostCSSPlugins'),
require.resolve('./plugins/features/html'),
require.resolve('./plugins/features/inlineLimit'),
require.resolve('./plugins/features/lessLoader'),
require.resolve('./plugins/features/outputPath'),
require.resolve('./plugins/features/postcssLoader'),
require.resolve('./plugins/features/publicPath'),
require.resolve('./plugins/features/runtimePublicPath'),
require.resolve('./plugins/features/targets'),
require.resolve('./plugins/features/terserOptions'),
require.resolve('./plugins/features/nodeModulesTransform'),
require.resolve('./plugins/features/vueLoader'),
// commands
require.resolve('./plugins/commands/build'),
require.resolve('./plugins/commands/dev'),
require.resolve('./plugins/commands/webpack'),
],
};
}

7
packages/fes-preset-built-in/src/plugins/commands/build/build.js → packages/fes-build-webpack/src/plugins/commands/build/build.js
View File

@ -1,15 +1,10 @@
import webpack from 'webpack';
export async function build({
bundleConfig
}) {
export async function build({ bundleConfig }) {
return new Promise((resolve, reject) => {
const compiler = webpack(bundleConfig);
compiler.run((err, stats) => {
if (err || stats.hasErrors()) {
try {
console.log(stats.toString('errors-only'));
} catch (e) {}
console.error(err);
return reject(new Error('build failed'));
}

27
packages/fes-preset-built-in/src/plugins/commands/build/index.js → packages/fes-build-webpack/src/plugins/commands/build/index.js
View File

@ -3,32 +3,27 @@
* https://github.com/umijs/umi/blob/master/packages/preset-built-in/src/plugins/commands/build/build.ts
*/
import { relative } from 'path';
import { existsSync } from 'fs';
import { Logger } from '@fesjs/compiler';
const logger = new Logger('fes:plugin-built-in');
const logger = new Logger('fes:build-webpack');
export default function (api) {
const {
paths,
utils: { rimraf }
utils: { rimraf, generateFiles },
} = api;
api.registerCommand({
command: 'build',
description: 'build application for production',
async fn() {
const { relative } = require('path');
const { existsSync } = require('fs');
const {
cleanTmpPathExceptCache,
getBundleAndConfigs,
printFileSizes
} = require('../buildDevUtils');
const generateFiles = require('../../../utils/generateFiles').default;
const { cleanTmpPathExceptCache, getBundleAndConfigs, printFileSizes } = require('../buildDevUtils');
const { build } = require('./build');
cleanTmpPathExceptCache({
absTmpPath: paths.absTmpPath
absTmpPath: paths.absTmpPath,
});
// generate files
@ -54,20 +49,20 @@ export default function (api) {
key: 'onBuildComplete',
type: api.ApplyPluginsType.event,
args: {
stats
}
stats,
},
});
} catch (err) {
await api.applyPlugins({
key: 'onBuildComplete',
type: api.ApplyPluginsType.event,
args: {
err
}
err,
},
});
// throw build error
throw err;
}
}
},
});
}

98
packages/fes-preset-built-in/src/plugins/commands/buildDevUtils.js → packages/fes-build-webpack/src/plugins/commands/buildDevUtils.js
View File

@ -9,9 +9,7 @@ import { rimraf, chalk } from '@fesjs/utils';
import zlib from 'zlib';
import getConfig from './webpackConfig';
export async function getBundleAndConfigs({
api
}) {
export async function getBundleAndConfigs({ api }) {
// get config
const env = api.env === 'production' ? 'production' : 'development';
const getConfigOpts = await api.applyPlugins({
@ -22,21 +20,21 @@ export async function getBundleAndConfigs({
config: api.config,
env,
entry: {
index: join(api.paths.absTmpPath, 'fes.js')
index: join(api.paths.absTmpPath, 'fes.js'),
},
// @ts-ignore
async modifyBabelOpts(opts) {
return api.applyPlugins({
type: api.ApplyPluginsType.modify,
key: 'modifyBabelOpts',
initialValue: opts
initialValue: opts,
});
},
async modifyBabelPresetOpts(opts) {
return api.applyPlugins({
type: api.ApplyPluginsType.modify,
key: 'modifyBabelPresetOpts',
initialValue: opts
initialValue: opts,
});
},
async chainWebpack(webpackConfig, opts) {
@ -45,44 +43,38 @@ export async function getBundleAndConfigs({
key: 'chainWebpack',
initialValue: webpackConfig,
args: {
...opts
}
...opts,
},
});
},
async headScripts() {
return api.applyPlugins({
key: 'addHTMLHeadScripts',
type: api.ApplyPluginsType.add,
initialState: []
initialState: [],
});
},
publicPath: await api.applyPlugins({
key: 'modifyPublicPathStr',
type: api.ApplyPluginsType.modify,
initialValue: api.config.publicPath || '',
args: {
}
})
args: {},
}),
},
args: {
}
args: {},
});
const bundleConfig = await api.applyPlugins({
type: api.ApplyPluginsType.modify,
key: 'modifyBundleConfig',
initialValue: await getConfig({ api, ...getConfigOpts }),
args: {
}
args: {},
});
return { bundleConfig };
}
export function cleanTmpPathExceptCache({
absTmpPath
}) {
export function cleanTmpPathExceptCache({ absTmpPath }) {
if (!existsSync(absTmpPath)) return;
readdirSync(absTmpPath).forEach((file) => {
if (file === '.cache') return;
@ -99,7 +91,7 @@ export function printFileSizes(stats, dir) {
const json = stats.toJson({
hash: false,
modules: false,
chunks: false
chunks: false,
});
const filesize = (bytes) => {
@ -116,25 +108,22 @@ export function printFileSizes(stats, dir) {
return `${bytes.toFixed(1)} ${unit[loop]}`;
};
const assets = json.assets
? json.assets
: json?.children?.reduce((acc, child) => acc.concat(child?.assets), []);
const assets = json.assets ? json.assets : json?.children?.reduce((acc, child) => acc.concat(child?.assets), []);
const seenNames = new Map();
const isJS = val => /\.js$/.test(val);
const isCSS = val => /\.css$/.test(val);
const isJS = (val) => /\.js$/.test(val);
const isCSS = (val) => /\.css$/.test(val);
const orderedAssets = assets.map((a) => {
const orderedAssets = assets
.map((a) => {
a.name = a.name.split('?')[0];
// These sizes are pretty large
const isMainBundle = a.name.indexOf('fes.') === 0;
const maxRecommendedSize = isMainBundle
? WARN_AFTER_BUNDLE_GZIP_SIZE
: WARN_AFTER_CHUNK_GZIP_SIZE;
const maxRecommendedSize = isMainBundle ? WARN_AFTER_BUNDLE_GZIP_SIZE : WARN_AFTER_CHUNK_GZIP_SIZE;
const isLarge = maxRecommendedSize && a.size > maxRecommendedSize;
return {
...a,
suggested: isLarge && isJS(a.name)
suggested: isLarge && isJS(a.name),
};
})
.filter((a) => {
@ -164,43 +153,30 @@ export function printFileSizes(stats, dir) {
}
ui.div(
`${makeRow(
chalk.cyan.bold('File'),
chalk.cyan.bold('Size'),
chalk.cyan.bold('Gzipped')
)
}\n\n${
// eslint-disable-next-line
orderedAssets.map(asset => makeRow(/js$/.test(asset.name) ? (asset.suggested ? chalk.yellow(join(dir, asset.name)) : chalk.green(join(dir, asset.name))) : chalk.blue(join(dir, asset.name)),
`${makeRow(chalk.cyan.bold('File'), chalk.cyan.bold('Size'), chalk.cyan.bold('Gzipped'))}\n\n${orderedAssets
.map((asset) =>
makeRow(
/js$/.test(asset.name)
? asset.suggested
? chalk.yellow(join(dir, asset.name))
: chalk.green(join(dir, asset.name))
: chalk.blue(join(dir, asset.name)),
filesize(asset.size),
getGzippedSize(asset)))
.join('\n')}`
getGzippedSize(asset),
),
)
.join('\n')}`,
);
console.log(`${ui.toString()}\n\n ${chalk.gray('Images and other types of assets omitted.')}\n`);
console.log(
`${ui.toString()}\n\n ${chalk.gray(
'Images and other types of assets omitted.'
)}\n`
);
if (orderedAssets?.some(asset => asset.suggested)) {
if (orderedAssets?.some((asset) => asset.suggested)) {
// We'll warn for bundles exceeding them.
// TODO: use umi docs
console.log();
console.log(
chalk.yellow('The bundle size is significantly larger than recommended.')
);
console.log(
chalk.yellow(
'Consider reducing it with code splitting'
)
);
console.log(
chalk.yellow(
'You can also analyze the project dependencies using ANALYZE=1'
)
);
console.log(chalk.yellow('The bundle size is significantly larger than recommended.'));
console.log(chalk.yellow('Consider reducing it with code splitting'));
console.log(chalk.yellow('You can also analyze the project dependencies using ANALYZE=1'));
console.log();
}
}

0
packages/fes-preset-built-in/src/plugins/commands/dev/cert/cert.pem → packages/fes-build-webpack/src/plugins/commands/dev/cert/cert.pem
View File

0
packages/fes-preset-built-in/src/plugins/commands/dev/cert/key.pem → packages/fes-build-webpack/src/plugins/commands/dev/cert/key.pem
View File

5
packages/fes-preset-built-in/src/plugins/commands/dev/createRouteMiddleware.js → packages/fes-build-webpack/src/plugins/commands/dev/createRouteMiddleware.js
View File

@ -1,12 +1,11 @@
import { extname, join } from 'path';
import historyFallback from 'connect-history-api-fallback';
const ASSET_EXT_NAMES = ['.ico', '.png', '.jpg', '.jpeg', '.gif', '.svg'];
export default api => (req, res, next) => {
export default (api) => (req, res, next) => {
const proxyConfig = api.config.proxy;
if (proxyConfig && Object.keys(proxyConfig).some(path => req.path.startsWith(path))) {
if (proxyConfig && Object.keys(proxyConfig).some((path) => req.path.startsWith(path))) {
return next();
}
if (req.path === '/favicon.ico') {

16
packages/fes-preset-built-in/src/plugins/commands/dev/devServer.js → packages/fes-build-webpack/src/plugins/commands/dev/devServer.js
View File

@ -3,17 +3,7 @@ import webpack from 'webpack';
import fs from 'fs';
import path from 'path';
export function startDevServer({
webpackConfig,
host,
port,
proxy,
https,
beforeMiddlewares,
afterMiddlewares,
customerDevServerConfig
}) {
export function startDevServer({ webpackConfig, host, port, proxy, https, beforeMiddlewares, afterMiddlewares, customerDevServerConfig }) {
const options = {
contentBase: webpackConfig.output.path,
hot: true,
@ -37,9 +27,9 @@ export function startDevServer({
});
},
headers: {
'access-control-allow-origin': '*'
'access-control-allow-origin': '*',
},
...(customerDevServerConfig || {})
...(customerDevServerConfig || {}),
};
if (https) {
options.https = true;

0
packages/fes-preset-built-in/src/plugins/commands/dev/fes.png → packages/fes-build-webpack/src/plugins/commands/dev/fes.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

9
packages/fes-preset-built-in/src/plugins/commands/dev/index-old.js → packages/fes-build-webpack/src/plugins/commands/dev/index.js
View File

@ -9,7 +9,7 @@ export default (api) => {
const {
env,
paths,
utils: { chalk, portfinder },
utils: { chalk, portfinder, generateFiles },
} = api;
const unwatchs = [];
@ -39,9 +39,7 @@ export default (api) => {
],
async fn({ args = {} }) {
const { cleanTmpPathExceptCache, getBundleAndConfigs } = require('../buildDevUtils');
const { delay } = require('@fesjs/utils');
const createRouteMiddleware = require('./createRouteMiddleware').default;
const generateFiles = require('../../../utils/generateFiles').default;
const { watchPkg } = require('./watchPkg');
const defaultPort = process.env.PORT || args.port || api.config.devServer?.port;
@ -135,11 +133,6 @@ export default (api) => {
unwatchs.push(unwatchConfig);
}
// delay dev server 启动，避免重复 compile
// https://github.com/webpack/watchpack/issues/25
// https://github.com/yessky/webpack-mild-compile
await delay(500);
// dev
const { bundleConfig } = await getBundleAndConfigs({ api });

9
packages/fes-preset-built-in/src/plugins/commands/dev/watchPkg.js → packages/fes-build-webpack/src/plugins/commands/dev/watchPkg.js
View File

@ -11,11 +11,8 @@ import { isPluginOrPreset, PluginType } from '@fesjs/compiler';
function getPlugins(opts) {
return Object.keys({
...opts.pkg.dependencies,
...opts.pkg.devDependencies
}).filter(name => (
isPluginOrPreset(PluginType.plugin, name)
|| isPluginOrPreset(PluginType.preset, name)
));
...opts.pkg.devDependencies,
}).filter((name) => isPluginOrPreset(PluginType.plugin, name) || isPluginOrPreset(PluginType.preset, name));
}
function getPluginsFromPkgPath(opts) {
@ -34,7 +31,7 @@ export function watchPkg(opts) {
const pkgPath = join(opts.cwd, 'package.json');
const plugins = getPluginsFromPkgPath({ pkgPath });
const watcher = chokidar.watch(pkgPath, {
ignoreInitial: true
ignoreInitial: true,
});
watcher.on('all', () => {
const newPlugins = getPluginsFromPkgPath({ pkgPath });

50
packages/fes-build-webpack/src/plugins/commands/webpack/index.js Normal file
View File

@ -0,0 +1,50 @@
export default function (api) {
api.registerCommand({
command: 'webpack',
description: 'inspect webpack configurations',
options: [
{
name: '--rule <ruleName>',
description: 'inspect a specific module rule',
},
{
name: '--plugin <pluginName>',
description: 'inspect a specific plugin',
},
{
name: '--rules',
description: 'list all module rule names',
},
{
name: '--plugins',
description: 'list all plugin names',
},
{
name: '--verbose',
description: 'show full function definitions in output',
},
],
async fn({ options }) {
const assert = require('assert');
const { getBundleAndConfigs } = require('../buildDevUtils');
const { toString } = require('webpack-chain');
const { highlight } = require('cli-highlight');
const { bundleConfig } = await getBundleAndConfigs({ api });
let config = bundleConfig;
assert(config, 'No valid config found with fes entry.');
if (options.rule) {
config = config.module.rules.find((r) => r.__ruleNames[0] === options.rule);
} else if (options.plugin) {
config = config.plugins.find((p) => p.__pluginName === options.plugin);
} else if (options.rules) {
config = config.module.rules.map((r) => r.__ruleNames[0]);
} else if (options.plugins) {
config = config.plugins.map((p) => p.__pluginName || p.constructor.name);
}
console.log(highlight(toString(config, { verbose: options.verbose }), { language: 'js' }));
},
});
}

112
packages/fes-build-webpack/src/plugins/commands/webpackConfig/css.js Normal file
View File

@ -0,0 +1,112 @@
// css less post-css mini-css css 压缩
// extraPostCSSPlugins
// postcssLoader
// lessLoader
// css-loader
// 支持 热加载
// 性能优化
// css 压缩 https://github.com/webpack-contrib/css-minimizer-webpack-plugin
// 根据 entry 进行代码块拆分
// 根据 entry 将文件输出到不同的文件夹
import { deepmerge } from '@fesjs/utils';
function createRules({ isDev, webpackConfig, config, lang, test, loader, options, browserslist, styleLoaderOption }) {
function applyLoaders(rule, cssLoaderOption = {}) {
if (isDev) {
rule.use('extra-css-loader').loader(require.resolve('style-loader')).options(Object.assign({}, styleLoaderOption));
} else {
rule.use('extra-css-loader').loader(require('mini-css-extract-plugin').loader).options({});
}
rule.use('css-loader')
.loader(require.resolve('css-loader'))
.options(
deepmerge(
{
importLoaders: 1,
...cssLoaderOption,
},
config.cssLoader || {},
),
);
rule.use('postcss-loader')
.loader(require.resolve('postcss-loader'))
.options(
deepmerge(
{
postcssOptions: () => ({
plugins: [
// https://github.com/luisrudge/postcss-flexbugs-fixes
require('postcss-flexbugs-fixes'),
require('postcss-safe-parser'),
[require('autoprefixer'), { ...config.autoprefixer, overrideBrowserslist: browserslist }],
...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : []),
],
}),
},
config.postcssLoader || {},
),
);
if (loader) {
rule.use(loader).loader(require.resolve(loader)).options(options);
}
}
const rule = webpackConfig.module.rule(lang).test(test);
applyLoaders(rule.oneOf('css-modules').resourceQuery(/module/), {
modules: {
localIdentName: '[local]___[hash:base64:5]',
},
});
applyLoaders(rule.oneOf('css'));
}
export default function createCssWebpackConfig({ isDev, config, webpackConfig, browserslist }) {
createRules({
isDev,
webpackConfig,
config,
lang: 'css',
test: /\.css$/,
browserslist,
});
createRules({
isDev,
webpackConfig,
config,
lang: 'less',
test: /\.less$/,
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
...config.lessLoader,
},
},
browserslist,
});
if (!isDev) {
webpackConfig.plugin('extra-css').use(require.resolve('mini-css-extract-plugin'), [
{
filename: '[name].[contenthash:8].css',
chunkFilename: '[id].[contenthash:8].css',
},
]);
webpackConfig.optimization.minimizer('css').use(require.resolve('css-minimizer-webpack-plugin'), [{}]);
}
return (options) => {
createRules({
isDev,
config,
webpackConfig,
browserslist,
...options,
});
};
}

6
packages/fes-build-webpack/src/plugins/commands/webpackConfig/define.js Normal file
View File

@ -0,0 +1,6 @@
import webpack from 'webpack';
import resolveDefine from './resolveDefine';
export default function createDefineWebpackConfig({ config, webpackConfig }) {
webpackConfig.plugin('define').use(webpack.DefinePlugin, [resolveDefine(config)]);
}

62
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/getBabelOpts.js → packages/fes-build-webpack/src/plugins/commands/webpackConfig/getBabelOpts.js
View File

@ -1,13 +1,6 @@
import {
winPath
} from '@fesjs/utils';
import { winPath } from '@fesjs/utils';
function getBabelOpts({
cwd,
targets,
config,
presetOpts
}) {
function getBabelOpts({ cwd, targets, config, presetOpts }) {
const presets = [
[
require.resolve('@babel/preset-env'),
@ -16,10 +9,10 @@ function getBabelOpts({
useBuiltIns: 'usage',
corejs: {
version: 3,
proposals: true
proposals: true,
},
modules: false,
},
modules: false
}
],
[
// FEATURE 实现类型安全检查
@ -28,18 +21,18 @@ function getBabelOpts({
// https://babeljs.io/docs/en/babel-plugin-transform-typescript#impartial-namespace-support
allowNamespaces: true,
isTSX: true,
allExtensions: true
}
allExtensions: true,
},
],
...(config.extraBabelPresets || [])
...(config.extraBabelPresets || []),
];
const plugins = [
require('@babel/plugin-proposal-export-default-from').default,
[
require('@babel/plugin-proposal-pipeline-operator').default,
{
proposal: 'minimal'
}
proposal: 'minimal',
},
],
require('@babel/plugin-proposal-do-expressions').default,
require('@babel/plugin-proposal-function-bind').default,
@ -47,18 +40,12 @@ function getBabelOpts({
require.resolve('@babel/plugin-transform-runtime'),
{
useESModules: true,
...presetOpts.transformRuntime
}
...presetOpts.transformRuntime,
},
],
...(presetOpts.import
? presetOpts.import.map(importOpts => [
require.resolve('babel-plugin-import'),
importOpts,
importOpts.libraryName
])
: []),
...(presetOpts.import ? presetOpts.import.map((importOpts) => [require.resolve('babel-plugin-import'), importOpts, importOpts.libraryName]) : []),
require.resolve('@vue/babel-plugin-jsx'),
...(config.extraBabelPlugins || [])
...(config.extraBabelPlugins || []),
];
return {
babelrc: false,
@ -66,23 +53,18 @@ function getBabelOpts({
cacheDirectory: process.env.BABEL_CACHE !== 'none' ? winPath(`${cwd}/.cache/babel-loader`) : false,
presets,
plugins,
overrides: [{
overrides: [
{
test: [/[\\/]node_modules[\\/]/, /\.fes/],
sourceType: 'unambiguous'
}]
sourceType: 'unambiguous',
},
],
};
}
export default async ({
cwd,
config,
modifyBabelOpts,
modifyBabelPresetOpts,
targets
}) => {
export default async ({ cwd, config, modifyBabelOpts, modifyBabelPresetOpts, targets }) => {
let presetOpts = {
transformRuntime: {}
transformRuntime: {},
};
if (modifyBabelPresetOpts) {
presetOpts = await modifyBabelPresetOpts(presetOpts);
@ -91,7 +73,7 @@ export default async ({
cwd,
config,
presetOpts,
targets
targets,
});
if (modifyBabelOpts) {
babelOpts = await modifyBabelOpts(babelOpts);

49
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js → packages/fes-build-webpack/src/plugins/commands/webpackConfig/html.js
View File

@ -1,24 +1,15 @@
import { join, resolve } from 'path';
import { existsSync } from 'fs';
import {
winPath
} from '@fesjs/utils';
import { winPath } from '@fesjs/utils';
import resolveDefine from './resolveDefine';
export default async function createHtmlWebpackConfig({
api,
cwd,
config,
webpackConfig,
headScripts,
isProd
}) {
export default async function createHtmlWebpackConfig({ api, cwd, config, webpackConfig, headScripts, isProd }) {
const htmlOptions = {
title: 'fes.js',
filename: '[name].html',
...config.html,
templateParameters: resolveDefine(config, true),
mountElementId: config.mountElementId
mountElementId: config.mountElementId,
};
if (isProd) {
@ -27,10 +18,10 @@ export default async function createHtmlWebpackConfig({
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeScriptTypeAttributes: true
removeScriptTypeAttributes: true,
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
}
},
});
}
@ -39,15 +30,11 @@ export default async function createHtmlWebpackConfig({
const publicCopyIgnore = [];
// default, single page setup.
htmlOptions.template = existsSync(htmlPath)
? htmlPath
: defaultHtmlPath;
htmlOptions.template = existsSync(htmlPath) ? htmlPath : defaultHtmlPath;
publicCopyIgnore.push(winPath(htmlOptions.template));
webpackConfig
.plugin('html')
.use(require.resolve('html-webpack-plugin'), [htmlOptions]);
webpackConfig.plugin('html').use(require.resolve('html-webpack-plugin'), [htmlOptions]);
// 如果需要导出html，则根据路由生成对应的html文件
if (config.exportStatic) {
@ -62,11 +49,9 @@ export default async function createHtmlWebpackConfig({
title: route?.meta?.title || config.html.title || 'fes.js',
filename: _fileName,
templateParameters: resolveDefine(config, true),
mountElementId: config.mountElementId
mountElementId: config.mountElementId,
};
webpackConfig
.plugin(_fileName)
.use(require.resolve('html-webpack-plugin'), [_htmlOptions]);
webpackConfig.plugin(_fileName).use(require.resolve('html-webpack-plugin'), [_htmlOptions]);
}
if (route.children && route.children.length) {
addHtml(route.children);
@ -79,16 +64,16 @@ export default async function createHtmlWebpackConfig({
if (headScripts) {
const headScriptsMap = await headScripts();
webpackConfig
.plugin('html-tags')
.use(require.resolve('html-webpack-tags-plugin'), [{
webpackConfig.plugin('html-tags').use(require.resolve('html-webpack-tags-plugin'), [
{
append: false,
scripts: headScriptsMap.map(script => ({
path: script.src
}))
}]);
scripts: headScriptsMap.map((script) => ({
path: script.src,
})),
},
]);
}
return {
publicCopyIgnore
publicCopyIgnore,
};
}

17
packages/fes-build-webpack/src/plugins/commands/webpackConfig/index-default.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="<%= htmlWebpackPlugin.options.mountElementId %>"></div>
</body>
</html>

117
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js → packages/fes-build-webpack/src/plugins/commands/webpackConfig/index.js
View File

@ -13,18 +13,17 @@ function getTargetsAndBrowsersList({ config }) {
let targets = config.targets || {};
targets = Object.keys(targets)
.filter(key => targets[key] !== false)
.filter((key) => targets[key] !== false)
.reduce((memo, key) => {
memo[key] = targets[key];
return memo;
}, {});
const browserslist = targets.browsers
|| Object.keys(targets).map(key => `${key} >= ${targets[key] === true ? '0' : targets[key]}`);
const browserslist = targets.browsers || Object.keys(targets).map((key) => `${key} >= ${targets[key] === true ? '0' : targets[key]}`);
return {
targets,
browserslist
browserslist,
};
}
@ -38,7 +37,7 @@ const DEFAULT_EXCLUDE_NODE_MODULES = [
'lodash-es',
'webpack-dev-server',
'ansi-html',
'html-entities'
'html-entities',
];
function genTranspileDepRegex(exclude) {
@ -47,7 +46,8 @@ function genTranspileDepRegex(exclude) {
if (typeof dep === 'string') {
const depPath = join('node_modules', dep, '/');
return /^win/.test(require('os').platform()) ? depPath.replace(/\\/g, '\\\\') : depPath;
} if (dep instanceof RegExp) {
}
if (dep instanceof RegExp) {
return dep.source;
}
@ -56,19 +56,7 @@ function genTranspileDepRegex(exclude) {
return deps.length ? new RegExp(deps.join('|')) : null;
}
export default async function getConfig({
api,
cwd,
config,
env,
entry = {},
modifyBabelOpts,
modifyBabelPresetOpts,
chainWebpack,
headScripts,
publicPath
}) {
export default async function getConfig({ api, cwd, config, env, entry = {}, modifyBabelOpts, modifyBabelPresetOpts, chainWebpack, headScripts, publicPath }) {
const isDev = env === 'development';
const isProd = env === 'production';
const webpackConfig = new Config();
@ -77,13 +65,13 @@ export default async function getConfig({
webpackConfig.mode(env);
webpackConfig.stats('verbose');
webpackConfig.externals(config.externals || {});
webpackConfig.devtool(isDev ? (config.devtool || 'cheap-module-source-map') : config.devtool);
webpackConfig.devtool(isDev ? config.devtool || 'cheap-module-source-map' : config.devtool);
// --------------- cache -----------
webpackConfig.cache({
type: 'filesystem',
version: require('../../../../package.json').version,
cacheDirectory: join(cwd, '.cache/webpack')
cacheDirectory: join(cwd, '.cache/webpack'),
});
// --------------- entry -----------
@ -93,19 +81,14 @@ export default async function getConfig({
});
// --------------- output -----------
webpackConfig.output
.path(absoluteOutput)
.publicPath(publicPath)
.filename('[name].[contenthash:8].js')
.chunkFilename('[name].[contenthash:8].chunk.js');
webpackConfig.output.path(absoluteOutput).publicPath(publicPath).filename('[name].[contenthash:8].js').chunkFilename('[name].[contenthash:8].chunk.js');
// --------------- resolve -----------
webpackConfig.resolve.extensions.merge(['.mjs', '.js', '.jsx', '.vue', '.ts', '.tsx', '.json', '.wasm']);
if (config.alias) {
Object.keys(config.alias).forEach((key) => {
webpackConfig.resolve.alias
.set(key, config.alias[key]);
webpackConfig.resolve.alias.set(key, config.alias[key]);
});
}
@ -122,9 +105,9 @@ export default async function getConfig({
loader: require.resolve('file-loader'),
options: {
name: 'static/[name].[hash:8].[ext]',
esModule: false
}
}
esModule: false,
},
},
});
webpackConfig.module
@ -134,7 +117,7 @@ export default async function getConfig({
.loader(require.resolve('file-loader'))
.options({
name: 'static/[name].[hash:8].[ext]',
esModule: false
esModule: false,
});
webpackConfig.module
@ -144,7 +127,7 @@ export default async function getConfig({
.loader(require.resolve('file-loader'))
.options({
name: 'static/[name].[hash:8].[ext]',
esModule: false
esModule: false,
});
webpackConfig.module
@ -153,7 +136,7 @@ export default async function getConfig({
.use('raw-loader')
.loader(require.resolve('raw-loader'))
.options({
esModule: false
esModule: false,
});
const { targets, browserslist } = getTargetsAndBrowsersList({ config });
@ -162,7 +145,7 @@ export default async function getConfig({
config,
modifyBabelOpts,
modifyBabelPresetOpts,
targets
targets,
});
// --------------- js -----------
@ -182,7 +165,8 @@ export default async function getConfig({
}
// Don't transpile node_modules
return /node_modules/.test(filepath);
}).end()
})
.end()
.use('babel-loader')
.loader(require.resolve('babel-loader'))
.options(babelOpts);
@ -193,14 +177,16 @@ export default async function getConfig({
webpackConfig.module
.rule('js-in-node_modules')
.test(/\.(js|mjs)$/)
.include.add(/node_modules/).end()
.include.add(/node_modules/)
.end()
.exclude.add((filepath) => {
if (transpileDepRegex && transpileDepRegex.test(filepath)) {
return true;
}
return false;
}).end()
})
.end()
.use('babel-loader')
.loader(require.resolve('babel-loader'))
.options(babelOpts);
@ -211,13 +197,13 @@ export default async function getConfig({
isDev,
config,
webpackConfig,
browserslist
browserslist,
});
// --------------- vue -----------
createVueWebpackConfig({
config,
webpackConfig
webpackConfig,
});
// --------------- html -----------
@ -227,11 +213,12 @@ export default async function getConfig({
config,
webpackConfig,
headScripts,
isProd
isProd,
});
// --------------- copy -----------
const copyPatterns = [existsSync(join(cwd, 'public')) && {
const copyPatterns = [
existsSync(join(cwd, 'public')) && {
from: join(cwd, 'public'),
filter: (resourcePath) => {
if (resourcePath.indexOf('.DS_Store') !== -1) {
@ -242,32 +229,34 @@ export default async function getConfig({
}
return true;
},
to: absoluteOutput
}, ...((config.copy || []).map((item) => {
to: absoluteOutput,
},
...(config.copy || []).map((item) => {
if (typeof item === 'string') {
return {
from: join(cwd, item.from),
to: absoluteOutput
to: absoluteOutput,
};
}
return {
from: join(cwd, item.from),
to: join(absoluteOutput, item.to)
to: join(absoluteOutput, item.to),
};
}))].filter(Boolean);
}),
].filter(Boolean);
// const publicCopyIgnore = ['.DS_Store'];
if (copyPatterns.length) {
webpackConfig
.plugin('copy')
.use(require.resolve('copy-webpack-plugin'), [{
patterns: copyPatterns
}]);
webpackConfig.plugin('copy').use(require.resolve('copy-webpack-plugin'), [
{
patterns: copyPatterns,
},
]);
}
// --------------- define -----------
createDefineWebpackConfig({
config,
webpackConfig
webpackConfig,
});
// --------------- 分包 -----------
@ -278,16 +267,16 @@ export default async function getConfig({
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
chunks: 'initial',
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
reuseExistingChunk: true,
},
},
});
}
@ -295,23 +284,19 @@ export default async function getConfig({
createMinimizerWebpackConfig({
isProd,
config,
webpackConfig
webpackConfig,
});
// --------------- 构建输出 ----------
webpackConfig
.plugin('progress')
.use(require.resolve('webpackbar'));
webpackConfig.plugin('progress').use(require.resolve('webpackbar'));
webpackConfig
.plugin('friendly-errors')
.use(require('@soda/friendly-errors-webpack-plugin'));
webpackConfig.plugin('friendly-errors').use(require('@soda/friendly-errors-webpack-plugin'));
// --------------- chainwebpack -----------
if (chainWebpack) {
await chainWebpack(webpackConfig, {
createCSSRule,
webpack
webpack,
});
}
// 用户配置的 chainWebpack 优先级最高
@ -319,7 +304,7 @@ export default async function getConfig({
await config.chainWebpack(webpackConfig, {
createCSSRule,
env,
webpack
webpack,
});
}

26
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/minimizer.js → packages/fes-build-webpack/src/plugins/commands/webpackConfig/minimizer.js
View File

@ -30,31 +30,21 @@ const defaultTerserOptions = {
// required features to drop conditional branches
conditionals: true,
dead_code: true,
evaluate: true
evaluate: true,
},
mangle: {
safari10: true
}
safari10: true,
},
};
const terserOptions = config => ({
terserOptions: deepmerge(
defaultTerserOptions,
config.terserOptions || {}
),
extractComments: false
const terserOptions = (config) => ({
terserOptions: deepmerge(defaultTerserOptions, config.terserOptions || {}),
extractComments: false,
});
export default function createMinimizerWebpackConfig({
isProd,
config,
webpackConfig
}) {
export default function createMinimizerWebpackConfig({ isProd, config, webpackConfig }) {
if (isProd) {
webpackConfig.optimization
.minimizer('terser')
.use(require.resolve('terser-webpack-plugin'), [terserOptions(config)]);
webpackConfig.optimization.minimizer('terser').use(require.resolve('terser-webpack-plugin'), [terserOptions(config)]);
}
if (process.env.FES_ENV === 'test') {
webpackConfig.optimization.minimize(false);

10
packages/fes-build-webpack/src/plugins/commands/webpackConfig/pitcher.js Normal file
View File

@ -0,0 +1,10 @@
const pitcher = (code) => code;
export const pitch = function () {
const context = this;
if (/&blockType=config/.test(context.resourceQuery)) {
return '';
}
};
export default pitcher;

4
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js → packages/fes-build-webpack/src/plugins/commands/webpackConfig/resolveDefine.js
View File

@ -25,7 +25,7 @@ export default function resolveDefine(opts = {}, raw) {
const define = {
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
...opts.define
...opts.define,
};
for (const key in define) {
@ -36,6 +36,6 @@ export default function resolveDefine(opts = {}, raw) {
return {
'process.env': env,
...define
...define,
};
}

20
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/vue.js → packages/fes-build-webpack/src/plugins/commands/webpackConfig/vue.js
View File

@ -1,9 +1,4 @@
import qs from 'qs';
export default function createVueWebpackConfig({
config,
webpackConfig
}) {
export default function createVueWebpackConfig({ config, webpackConfig }) {
webpackConfig.module
.rule('vue')
.test(/\.vue$/)
@ -11,7 +6,7 @@ export default function createVueWebpackConfig({
.loader(require.resolve('vue-loader'))
.options({
babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
...(config.vueLoader || {})
...(config.vueLoader || {}),
})
.end();
@ -21,11 +16,10 @@ export default function createVueWebpackConfig({
if (!query) {
return false;
}
const parsed = qs.parse(query.slice(1));
return parsed.vue != null;
}).use('vue-custom-loader').loader(require.resolve('./pitcher'));
return query.startsWith('?vue&type=custom');
})
.use('vue-custom-loader')
.loader(require.resolve('./pitcher'));
webpackConfig
.plugin('vue-loader-plugin')
.use(require('vue-loader').VueLoaderPlugin);
webpackConfig.plugin('vue-loader-plugin').use(require('vue-loader').VueLoaderPlugin);
}

5
packages/fes-preset-built-in/src/plugins/features/alias.js → packages/fes-build-webpack/src/plugins/features/alias.js
View File

@ -7,9 +7,8 @@ export default (api) => {
schema(joi) {
return joi.object();
},
default: {
}
}
default: {},
},
});
api.chainWebpack(async (memo) => {

15
packages/fes-preset-built-in/src/plugins/features/analyze.js → packages/fes-build-webpack/src/plugins/features/analyze.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'analyze',
@ -13,7 +12,7 @@ export default (api) => {
generateStatsFile: joi.boolean(),
statsFilename: joi.string(),
logLevel: joi.string().valid('info', 'warn', 'error', 'silent'),
defaultSizes: joi.string().valid('stat', 'parsed', 'gzip')
defaultSizes: joi.string().valid('stat', 'parsed', 'gzip'),
})
.unknown(true);
},
@ -25,17 +24,13 @@ export default (api) => {
generateStatsFile: !!process.env.ANALYZE_DUMP,
statsFilename: process.env.ANALYZE_DUMP || 'stats.json',
logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',
defaultSizes: 'parsed' // stat // gzip
}
defaultSizes: 'parsed', // stat // gzip
},
enableBy: () => !!process.env.ANALYZE
},
enableBy: () => !!process.env.ANALYZE,
});
api.chainWebpack((webpackConfig) => {
webpackConfig
.plugin('bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [
api.config?.analyze || {}
]);
webpackConfig.plugin('bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [api.config?.analyze || {}]);
return webpackConfig;
});
};

13
packages/fes-build-webpack/src/plugins/features/autoprefixer.js Normal file
View File

@ -0,0 +1,13 @@
export default (api) => {
api.describe({
key: 'autoprefixer',
config: {
default: {
flexbox: 'no-2009',
},
schema(joi) {
return joi.object().description('postcss autoprefixer, default flexbox: no-2009');
},
},
});
};

4
packages/fes-preset-built-in/src/plugins/features/chainWebpack.js → packages/fes-build-webpack/src/plugins/features/chainWebpack.js
View File

@ -4,7 +4,7 @@ export default (api) => {
config: {
schema(joi) {
return joi.function();
}
}
},
},
});
};

11
packages/fes-preset-built-in/src/plugins/features/copy.js → packages/fes-build-webpack/src/plugins/features/copy.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'copy',
@ -8,12 +7,12 @@ export default (api) => {
joi.alternatives(
joi.object({
from: joi.string(),
to: joi.string()
to: joi.string(),
}),
joi.string()
)
joi.string(),
),
);
}
}
},
},
});
};

22
packages/fes-build-webpack/src/plugins/features/cssLoader.js Normal file
View File

@ -0,0 +1,22 @@
export default (api) => {
api.describe({
key: 'cssLoader',
config: {
default: {},
schema(joi) {
return joi
.object({
url: joi.alternatives(joi.boolean(), joi.function()),
import: joi.alternatives(joi.boolean(), joi.function()),
modules: joi.alternatives(joi.boolean(), joi.string(), joi.object()),
sourceMap: joi.boolean(),
importLoaders: joi.number(),
onlyLocals: joi.boolean(),
esModule: joi.boolean(),
localsConvention: joi.string().valid('asIs', 'camelCase', 'camelCaseOnly', 'dashes', 'dashesOnly'),
})
.description('more css-loader options see https://webpack.js.org/loaders/css-loader/#options');
},
},
});
};

6
packages/fes-preset-built-in/src/plugins/features/define.js → packages/fes-build-webpack/src/plugins/features/define.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'define',
@ -6,8 +5,7 @@ export default (api) => {
schema(joi) {
return joi.object();
},
default: {
}
}
default: {},
},
});
};

11
packages/fes-preset-built-in/src/plugins/features/devServer.js → packages/fes-build-webpack/src/plugins/features/devServer.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'devServer',
@ -13,17 +12,17 @@ export default (api) => {
joi
.object({
key: joi.string(),
cert: joi.string()
cert: joi.string(),
})
.unknown(),
joi.boolean()
joi.boolean(),
),
headers: joi.object(),
writeToDisk: joi.alternatives(joi.boolean(), joi.function())
writeToDisk: joi.alternatives(joi.boolean(), joi.function()),
})
.description('devServer configs')
.unknown(true);
}
}
},
},
});
};

5
packages/fes-preset-built-in/src/plugins/features/devtool.js → packages/fes-build-webpack/src/plugins/features/devtool.js
View File

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

8
packages/fes-preset-built-in/src/plugins/features/exportStatic.js → packages/fes-build-webpack/src/plugins/features/exportStatic.js
View File

@ -5,13 +5,11 @@ export default (api) => {
schema(joi) {
return joi.object({
htmlSuffix: joi.boolean(),
dynamicRoot: joi.boolean()
dynamicRoot: joi.boolean(),
});
}
},
},
// TODO: api.EnableBy.config 读取的 userConfig，modifyDefaultConfig hook 修改后对这个判断不起效
enableBy: () => ('exportStatic' in api.userConfig
? api.userConfig.exportStatic
: api.config?.exportStatic)
enableBy: () => ('exportStatic' in api.userConfig ? api.userConfig.exportStatic : api.config?.exportStatic),
});
};

5
packages/fes-preset-built-in/src/plugins/features/externals.js → packages/fes-build-webpack/src/plugins/features/externals.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'externals',
@ -6,7 +5,7 @@ export default (api) => {
schema(joi) {
// https://webpack.js.org/configuration/externals/#externals
return joi.alternatives(joi.object(), joi.string(), joi.function());
}
}
},
},
});
};

5
packages/fes-preset-built-in/src/plugins/features/extraBabelPlugins.js → packages/fes-build-webpack/src/plugins/features/extraBabelPlugins.js
View File

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

5
packages/fes-preset-built-in/src/plugins/features/extraBabelPresets.js → packages/fes-build-webpack/src/plugins/features/extraBabelPresets.js
View File

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

5
packages/fes-preset-built-in/src/plugins/features/extraPostCSSPlugins.js → packages/fes-build-webpack/src/plugins/features/extraPostCSSPlugins.js
View File

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

11
packages/fes-build-webpack/src/plugins/features/html.js Normal file
View File

@ -0,0 +1,11 @@
export default (api) => {
api.describe({
key: 'html',
config: {
schema(joi) {
return joi.object().description('more html-webpack-plugin options see https://github.com/jantimon/html-webpack-plugin#configuration');
},
default: {},
},
});
};

5
packages/fes-preset-built-in/src/plugins/features/inlineLimit.js → packages/fes-build-webpack/src/plugins/features/inlineLimit.js
View File

@ -1,11 +1,10 @@
export default (api) => {
api.describe({
key: 'inlineLimit',
config: {
schema(joi) {
return joi.number();
}
}
},
},
});
};

5
packages/fes-preset-built-in/src/plugins/features/lessLoader.js → packages/fes-build-webpack/src/plugins/features/lessLoader.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'lessLoader',
@ -6,7 +5,7 @@ export default (api) => {
default: {},
schema(joi) {
return joi.object();
}
}
},
},
});
};

9
packages/fes-preset-built-in/src/plugins/features/nodeModulesTransform.js → packages/fes-build-webpack/src/plugins/features/nodeModulesTransform.js
View File

@ -1,16 +1,15 @@
export default (api) => {
api.describe({
key: 'nodeModulesTransform',
config: {
default: {
exclude: []
exclude: [],
},
schema(joi) {
return joi.object({
exclude: joi.array().items(joi.string())
exclude: joi.array().items(joi.string()),
});
}
}
},
},
});
};

11
packages/fes-build-webpack/src/plugins/features/outputPath.js Normal file
View File

@ -0,0 +1,11 @@
export default (api) => {
api.describe({
key: 'outputPath',
config: {
default: 'dist',
schema(joi) {
return joi.string().not('src', 'public', 'pages', 'mock', 'config').allow('');
},
},
});
};

5
packages/fes-preset-built-in/src/plugins/features/postcssLoader.js → packages/fes-build-webpack/src/plugins/features/postcssLoader.js
View File

@ -1,11 +1,10 @@
export default (api) => {
api.describe({
key: 'postcssLoader',
config: {
schema(joi) {
return joi.object();
}
}
},
},
});
};

11
packages/fes-build-webpack/src/plugins/features/publicPath.js Normal file
View File

@ -0,0 +1,11 @@
export default (api) => {
api.describe({
key: 'publicPath',
config: {
default: '/',
schema(joi) {
return joi.string().regex(/\/$/).error(new Error('config.publicPath must end with /.'));
},
},
});
};

5
packages/fes-preset-built-in/src/plugins/features/runtimePublicPath.js → packages/fes-build-webpack/src/plugins/features/runtimePublicPath.js
View File

@ -1,12 +1,11 @@
export default (api) => {
api.describe({
key: 'runtimePublicPath',
config: {
schema(joi) {
return joi.boolean();
}
},
default: false
},
default: false,
});
};

7
packages/fes-preset-built-in/src/plugins/features/targets.js → packages/fes-build-webpack/src/plugins/features/targets.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'targets',
@ -8,11 +7,11 @@ export default (api) => {
firefox: 64,
safari: 10,
edge: 13,
ios: 10
ios: 10,
},
schema(joi) {
return joi.object();
}
}
},
},
});
};

5
packages/fes-preset-built-in/src/plugins/features/terserOptions.js → packages/fes-build-webpack/src/plugins/features/terserOptions.js
View File

@ -1,11 +1,10 @@
export default (api) => {
api.describe({
key: 'terserOptions',
config: {
schema(joi) {
return joi.object();
}
}
},
},
});
};

10
packages/fes-build-webpack/src/plugins/features/vueLoader.js Normal file
View File

@ -0,0 +1,10 @@
export default (api) => {
api.describe({
key: 'vueLoader',
config: {
schema(joi) {
return joi.object({}).description('more vue-loader options see https://vue-loader.vuejs.org/');
},
},
});
};

6
packages/fes-build-webpack/src/utils/constants.js Normal file
View File

@ -0,0 +1,6 @@
import { winPath } from '@fesjs/utils';
import { dirname } from 'path';
export const runtimePath = winPath(
dirname(require.resolve('@fesjs/runtime/package.json'))
);

60
packages/fes-build-webpack/src/utils/generateExports.js Normal file
View File

@ -0,0 +1,60 @@
import { lodash, winPath } from '@fesjs/utils';
import assert from 'assert';
import path from 'path';
const reserveLibrarys = ['fes']; // reserve library
// todo 插件导出内容冲突问题待解决
const reserveExportsNames = [
'Link',
'NavLink',
'Redirect',
'dynamic',
'withRouter',
'Route'
];
export default function generateExports(basePath, { item, fesExportsHook }) {
assert(item.source, 'source should be supplied.');
const source = path.relative(path.basename(basePath), item.source);
assert(
item.exportAll || item.specifiers,
'exportAll or specifiers should be supplied.'
);
assert(
!reserveLibrarys.includes(source),
`${source} is reserve library, Please don't use it.`
);
if (item.exportAll) {
return `export * from '${winPath(source)}';`;
}
assert(
Array.isArray(item.specifiers),
`specifiers should be Array, but got ${item.specifiers.toString()}.`
);
const specifiersStrArr = item.specifiers.map((specifier) => {
if (typeof specifier === 'string') {
assert(
!reserveExportsNames.includes(specifier),
`${specifier} is reserve name, you can use 'exported' to set alias.`
);
assert(
!fesExportsHook[specifier],
`${specifier} is Defined, you can use 'exported' to set alias.`
);
fesExportsHook[specifier] = true;
return specifier;
}
assert(
lodash.isPlainObject(specifier),
`Configure item context should be Plain Object, but got ${specifier}.`
);
assert(
specifier.local && specifier.exported,
'local and exported should be supplied.'
);
return `${specifier.local} as ${specifier.exported}`;
});
return `export { ${specifiersStrArr.join(', ')} } from '${winPath(
source
)}';`;
}

15
packages/fes-preset-built-in/src/utils/generateFiles.js → packages/fes-build-webpack/src/utils/generateFiles.js
View File

@ -8,7 +8,7 @@ export default async ({ api, watch }) => {
api.logger.debug('generate files');
await api.applyPlugins({
key: 'onGenerateFiles',
type: api.ApplyPluginsType.event
type: api.ApplyPluginsType.event,
});
}
@ -27,13 +27,13 @@ export default async ({ api, watch }) => {
const watcher = chokidar.watch(path, {
// ignore .dotfiles and _mock.js
ignored: /(^|[/\\])(_mock.js$|\..)/,
ignoreInitial: true
ignoreInitial: true,
});
watcher.on(
'all',
lodash.throttle(async () => {
await generate();
}, 100)
}, 100),
);
watchers.push(watcher);
}
@ -42,14 +42,9 @@ export default async ({ api, watch }) => {
const watcherPaths = await api.applyPlugins({
key: 'addTmpGenerateWatcherPaths',
type: api.ApplyPluginsType.add,
initialValue: [
paths.absPagesPath,
getAppPath(paths.absSrcPath)
]
initialValue: [paths.absPagesPath, getAppPath(paths.absSrcPath)],
});
lodash
.uniq(watcherPaths.map(p => winPath(p)))
.forEach((p) => {
lodash.uniq(watcherPaths.map((p) => winPath(p))).forEach((p) => {
createWatcher(p);
});
}

0
packages/fes-preset-built-in/src/utils/getAppEntryPath.js → packages/fes-build-webpack/src/utils/getAppEntryPath.js
View File

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

@ -1,19 +1,11 @@
import {
dirname, join, basename, relative, extname
} from 'path';
import {
compatESModuleRequire,
resolve,
winPath,
pkgUp,
lodash
} from '@fesjs/utils';
import { dirname, join, basename, relative, extname } from 'path';
import { compatESModuleRequire, resolve, winPath, pkgUp, lodash } from '@fesjs/utils';
import { PluginType } from '../enums';
const RE = {
[PluginType.plugin]: /^(@fesjs\/|@webank\/fes-|fes-)plugin-/,
[PluginType.preset]: /^(@fesjs\/|@webank\/fes-|fes-)preset-/
[PluginType.preset]: /^(@fesjs\/|@webank\/fes-|fes-)preset-/,
};
export function isPluginOrPreset(type, name) {
@ -25,25 +17,36 @@ export function isPluginOrPreset(type, name) {
return re.test(name);
}
function filterPluginAndPreset(type, pkg) {
return Object.keys(pkg.devDependencies || {})
.concat(Object.keys(pkg.dependencies || {}))
.filter(isPluginOrPreset.bind(null, type));
}
function filterBuilder(pkg) {
return Object.keys(pkg.devDependencies || {})
.concat(Object.keys(pkg.dependencies || {}))
.filter((name) => /^@fesjs\/build-/.test(name));
}
export function getPluginsOrPresets(type, opts) {
const upperCaseType = type.toUpperCase();
return [
// dependencies
// opts
...((opts[type === PluginType.preset ? 'presets' : 'plugins']) || []),
...(opts[type === PluginType.preset ? 'presets' : 'plugins'] || []),
// env
...(process.env[`FES_${upperCaseType}S`] || '').split(',').filter(Boolean),
...Object.keys(opts.pkg.devDependencies || {})
.concat(Object.keys(opts.pkg.dependencies || {}))
.filter(isPluginOrPreset.bind(null, type)),
...filterPluginAndPreset(type, opts.pkg),
// 构建只允许是 presets
...(type === PluginType.preset ? filterBuilder(opts.pkg) : []),
// user config
...((opts[
type === PluginType.preset ? 'userConfigPresets' : 'userConfigPlugins'
]) || [])
].map(path => resolve.sync(path, {
...(opts[type === PluginType.preset ? 'userConfigPresets' : 'userConfigPlugins'] || []),
].map((path) =>
resolve.sync(path, {
basedir: opts.cwd,
extensions: ['.js', '.ts']
}));
extensions: ['.js', '.ts'],
}),
);
}
// e.g.
@ -52,7 +55,7 @@ export function getPluginsOrPresets(type, opts) {
function nameToKey(name) {
return name
.split('.')
.map(part => lodash.camelCase(part))
.map((part) => lodash.camelCase(part))
.join('.');
}
@ -70,8 +73,7 @@ export function pathToObj({ path, type, cwd }) {
if (pkgJSONPath) {
// eslint-disable-next-line
pkg = require(pkgJSONPath);
isPkgPlugin = winPath(join(dirname(pkgJSONPath), pkg.main || 'index.js'))
=== winPath(path);
isPkgPlugin = winPath(join(dirname(pkgJSONPath), pkg.main || 'index.js')) === winPath(path);
}
let id;
@ -87,9 +89,7 @@ export function pathToObj({ path, type, cwd }) {
id = id.replace('@fesjs/preset-built-in/lib/plugins', '@@');
id = id.replace(/\.js$/, '');
const key = isPkgPlugin
? pkgNameToKey(pkg.name, type)
: nameToKey(basename(path, extname(path)));
const key = isPkgPlugin ? pkgNameToKey(pkg.name, type) : nameToKey(basename(path, extname(path)));
return {
id,
@ -106,28 +106,32 @@ export function pathToObj({ path, type, cwd }) {
throw new Error(`Register ${path} failed, since ${e.message}`);
}
},
defaultConfig: null
defaultConfig: null,
};
}
export function resolvePresets(opts) {
const type = PluginType.preset;
const presets = [...getPluginsOrPresets(type, opts)];
return presets.map(path => pathToObj({
return presets.map((path) =>
pathToObj({
type,
path,
cwd: opts.cwd
}));
cwd: opts.cwd,
}),
);
}
export function resolvePlugins(opts) {
const type = PluginType.plugin;
const plugins = getPluginsOrPresets(type, opts);
return plugins.map(path => pathToObj({
return plugins.map((path) =>
pathToObj({
path,
type,
cwd: opts.cwd
}));
cwd: opts.cwd,
}),
);
}
export function isValidPlugin(plugin) {

51
packages/fes-preset-built-in/package.json
View File

@ -25,59 +25,14 @@
"access": "public"
},
"dependencies": {
"@babel/core": "^7.12.13",
"@babel/plugin-proposal-do-expressions": "^7.12.13",
"@babel/plugin-proposal-export-default-from": "^7.12.13",
"@babel/plugin-proposal-function-bind": "^7.12.13",
"@babel/plugin-proposal-pipeline-operator": "^7.12.13",
"@babel/plugin-transform-runtime": "^7.12.13",
"@babel/preset-env": "^7.12.13",
"@babel/preset-typescript": "^7.15.0",
"@fesjs/compiler": "^2.0.5",
"@fesjs/utils": "^2.0.4",
"@soda/friendly-errors-webpack-plugin": "^1.8.0",
"@vitejs/plugin-vue": "^2.2.4",
"@vitejs/plugin-vue-jsx": "^1.3.8",
"@vue/babel-plugin-jsx": "^1.0.2",
"autoprefixer": "^10.2.4",
"babel-loader": "^8.2.2",
"babel-plugin-import": "1.13.3",
"body-parser": "^1.19.0",
"cli-highlight": "^2.1.4",
"cliui": "7.0.4",
"connect-history-api-fallback": "^1.6.0",
"cookie-parser": "^1.4.5",
"copy-webpack-plugin": "^7.0.0",
"core-js": "^3.8.3",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^3.0.0",
"envinfo": "^7.7.3",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.0.0",
"html-webpack-tags-plugin": "^3.0.0",
"less": "3.9.0",
"less-loader": "^8.0.0",
"mini-css-extract-plugin": "^1.3.5",
"mockjs": "^1.1.0",
"postcss": "8.3.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^4.2.0",
"postcss-safe-parser": "^5.0.2",
"qs": "^6.10.2",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"vite": "^2.8.6",
"vue-loader": "^16.1.2",
"webpack": "^5.24.2",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-chain": "^6.5.1",
"webpack-dev-server": "^3.11.2",
"webpackbar": "^5.0.0-3"
"mockjs": "^1.1.0"
},
"peerDependencies": {
"@vue/compiler-sfc": "^3.0.5",
"core-js": "^3.8.3"
},
"devDependencies": {}
"@vue/compiler-sfc": "^3.0.5"
}
}

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

@ -11,50 +11,22 @@ export default function () {
require.resolve('./plugins/generateFiles/fes'),
// bundle configs
require.resolve('./plugins/features/alias'),
require.resolve('./plugins/features/analyze'),
require.resolve('./plugins/features/autoprefixer'),
require.resolve('./plugins/features/base'),
require.resolve('./plugins/features/chainWebpack'),
require.resolve('./plugins/features/cssLoader'),
require.resolve('./plugins/features/copy'),
require.resolve('./plugins/features/checkVuePackage'),
require.resolve('./plugins/features/define'),
require.resolve('./plugins/features/devServer'),
require.resolve('./plugins/features/devtool'),
require.resolve('./plugins/features/dynamicImport'),
require.resolve('./plugins/features/externals'),
require.resolve('./plugins/features/exportStatic'),
require.resolve('./plugins/features/extraBabelPlugins'),
require.resolve('./plugins/features/extraBabelPresets'),
require.resolve('./plugins/features/extraPostCSSPlugins'),
require.resolve('./plugins/features/html'),
require.resolve('./plugins/features/globalCSS'),
require.resolve('./plugins/features/inlineLimit'),
require.resolve('./plugins/features/lessLoader'),
require.resolve('./plugins/features/mountElementId'),
require.resolve('./plugins/features/mock'),
require.resolve('./plugins/features/outputPath'),
require.resolve('./plugins/features/plugins'),
require.resolve('./plugins/features/postcssLoader'),
require.resolve('./plugins/features/proxy'),
require.resolve('./plugins/features/publicPath'),
require.resolve('./plugins/features/runtimePublicPath'),
require.resolve('./plugins/features/singular'),
require.resolve('./plugins/features/targets'),
require.resolve('./plugins/features/terserOptions'),
require.resolve('./plugins/features/nodeModulesTransform'),
require.resolve('./plugins/features/vueLoader'),
// misc
require.resolve('./plugins/misc/route'),
// route
require.resolve('./plugins/route'),
// commands
require.resolve('./plugins/commands/build'),
require.resolve('./plugins/commands/dev'),
require.resolve('./plugins/commands/help'),
require.resolve('./plugins/commands/info'),
require.resolve('./plugins/commands/webpack')
]
],
};
}

227
packages/fes-preset-built-in/src/plugins/commands/dev/index.js
View File

@ -1,227 +0,0 @@
/**
* @copy 该文件代码大部分出自 umi，有需要请参考：
* https://github.com/umijs/umi/blob/master/packages/preset-built-in/src/plugins/commands/dev/dev.ts
*/
import { createServer } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import SFCConfigBlockPlugin from './SFCConfigBlockPlugin';
const assert = require('assert');
export default (api) => {
const {
env,
paths,
utils: { chalk, portfinder },
} = api;
const unwatchs = [];
let port;
let hostname;
let server;
function destroy() {
for (const unwatch of unwatchs) {
unwatch();
}
server?.close();
}
api.registerCommand({
command: 'dev',
description: 'start a local http service for development',
options: [
{
name: '--port',
description: 'http service port, like 8080',
},
{
name: '--https',
description: 'whether to turn on the https service',
},
],
async fn({ args = {} }) {
const { cleanTmpPathExceptCache } = require('../buildDevUtils');
const generateFiles = require('../../../utils/generateFiles').default;
const { watchPkg } = require('./watchPkg');
const defaultPort = process.env.PORT || args.port || api.config.devServer?.port;
port = await portfinder.getPortPromise({
port: defaultPort ? parseInt(String(defaultPort), 10) : 8000,
});
hostname = process.env.HOST || api.config.devServer?.host || 'localhost';
process.send({
type: 'UPDATE_PORT',
port,
});
// enable https
// const isHTTPS = process.env.HTTPS || args.https;
cleanTmpPathExceptCache({
absTmpPath: paths.absTmpPath,
});
const watch = process.env.WATCH !== 'none';
// generate files
const unwatchGenerateFiles = await generateFiles({
api,
watch,
});
if (unwatchGenerateFiles) unwatchs.push(unwatchGenerateFiles);
if (watch) {
// watch pkg changes
const unwatchPkg = watchPkg({
cwd: api.cwd,
onChange() {
console.log();
api.logger.info('Plugins in package.json changed.');
api.restartServer();
},
});
unwatchs.push(unwatchPkg);
// watch config change
const unwatchConfig = api.service.configInstance.watch({
userConfig: api.service.userConfig,
onChange: async ({ pluginChanged, valueChanged }) => {
if (pluginChanged.length) {
console.log();
api.logger.info(`Plugins of ${pluginChanged.map((p) => p.key).join(', ')} changed.`);
api.restartServer();
}
if (valueChanged.length) {
let reload = false;
let regenerateTmpFiles = false;
const fns = [];
const reloadConfigs = [];
valueChanged.forEach(({ key, pluginId }) => {
const { onChange } = api.service.plugins[pluginId].config || {};
if (onChange === api.ConfigChangeType.regenerateTmpFiles) {
regenerateTmpFiles = true;
}
if (!onChange || onChange === api.ConfigChangeType.reload) {
reload = true;
reloadConfigs.push(key);
}
if (typeof onChange === 'function') {
fns.push(onChange);
}
});
if (reload) {
console.log();
api.logger.info(`Config ${reloadConfigs.join(', ')} changed.`);
api.restartServer();
} else {
api.service.userConfig = api.service.configInstance.getUserConfig();
await api.setConfig();
if (regenerateTmpFiles) {
await generateFiles({
api,
});
} else {
fns.forEach((fn) => fn());
}
}
}
},
});
unwatchs.push(unwatchConfig);
}
server = await createServer({
mode: 'development',
plugins: [vue(), SFCConfigBlockPlugin, vueJsx()],
configFile: false,
resolve: {
alias: {
'@': paths.absSrcPath,
'@@': paths.absTmpPath,
'@fesInner': '/',
},
},
optimizeDeps: {
// exclude: ['@fesjs/fes'],
},
server: {
port: 8000,
},
});
await server.listen();
server.printUrls();
// dev
// const { bundleConfig } = await getBundleAndConfigs({ api });
// const beforeMiddlewares = await api.applyPlugins({
// key: 'addBeforeMiddlewares',
// type: api.ApplyPluginsType.add,
// initialValue: [],
// args: {}
// });
// const middlewares = await api.applyPlugins({
// key: 'addMiddlewares',
// type: api.ApplyPluginsType.add,
// initialValue: [],
// args: {}
// });
// const { startDevServer } = require('./devServer');
// server = startDevServer({
// webpackConfig: bundleConfig,
// host: hostname,
// port,
// proxy: api.config.proxy,
// https: isHTTPS,
// beforeMiddlewares: [...beforeMiddlewares, createRouteMiddleware(api)],
// afterMiddlewares: [...middlewares],
// customerDevServerConfig: api.config.devServer
// });
return {
destroy,
};
},
});
api.registerMethod({
name: 'getPort',
fn() {
assert(env === 'development', 'api.getPort() is only valid in development.');
return port;
},
});
api.registerMethod({
name: 'getHostname',
fn() {
assert(env === 'development', 'api.getHostname() is only valid in development.');
return hostname;
},
});
api.registerMethod({
name: 'getServer',
fn() {
assert(env === 'development', 'api.getServer() is only valid in development.');
return server;
},
});
api.registerMethod({
name: 'restartServer',
fn() {
console.log(chalk.gray('Try to restart dev server...'));
destroy();
process.send({
type: 'RESTART',
});
},
});
};

4
packages/fes-preset-built-in/src/plugins/commands/help/index.js
View File

@ -1,11 +1,9 @@
export default function (api) {
api.registerCommand({
command: 'help',
description: 'show command helps',
async fn({ program }) {
program.outputHelp();
}
},
});
}

12
packages/fes-preset-built-in/src/plugins/commands/info/index.js
View File

@ -1,24 +1,24 @@
export default function (api) {
api.registerCommand({
command: 'info',
description: 'print debugging information about your environment',
async fn() {
return require('envinfo').run(
return require('envinfo')
.run(
{
System: ['OS', 'CPU'],
Binaries: ['Node', 'Yarn', 'npm'],
Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
npmPackages: ['@fesjs/fes', 'vue', 'vue-router'],
npmGlobalPackages: ['@fesjs/fes']
npmGlobalPackages: ['@fesjs/fes'],
},
{
showNotFound: true,
duplicates: true,
fullTree: true
}
fullTree: true,
},
)
.then(console.log);
}
},
});
}

50
packages/fes-preset-built-in/src/plugins/commands/webpack/index.js
View File

@ -1,50 +0,0 @@
export default function (api) {
api.registerCommand({
command: 'webpack',
description: 'inspect webpack configurations',
options: [{
name: '--rule <ruleName>',
description: 'inspect a specific module rule'
}, {
name: '--plugin <pluginName>',
description: 'inspect a specific plugin'
}, {
name: '--rules',
description: 'list all module rule names'
}, {
name: '--plugins',
description: 'list all plugin names'
}, {
name: '--verbose',
description: 'show full function definitions in output'
}],
async fn({ options }) {
const assert = require('assert');
const { getBundleAndConfigs } = require('../buildDevUtils');
const { toString } = require('webpack-chain');
const { highlight } = require('cli-highlight');
const { bundleConfig } = await getBundleAndConfigs({ api });
let config = bundleConfig;
assert(config, 'No valid config found with fes entry.');
if (options.rule) {
config = config.module.rules.find(
r => r.__ruleNames[0] === options.rule
);
} else if (options.plugin) {
config = config.plugins.find(
p => p.__pluginName === options.plugin
);
} else if (options.rules) {
config = config.module.rules.map(r => r.__ruleNames[0]);
} else if (options.plugins) {
config = config.plugins.map(
p => p.__pluginName || p.constructor.name
);
}
console.log(highlight(toString(config, { verbose: options.verbose }), { language: 'js' }));
}
});
}

133
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js
View File

@ -1,133 +0,0 @@
// css less post-css mini-css css 压缩
// extraPostCSSPlugins
// postcssLoader
// lessLoader
// css-loader
// 支持 热加载
// 性能优化
// css 压缩 https://github.com/webpack-contrib/css-minimizer-webpack-plugin
// 根据 entry 进行代码块拆分
// 根据 entry 将文件输出到不同的文件夹
import { deepmerge } from '@fesjs/utils';
function createRules({
isDev,
webpackConfig,
config,
lang,
test,
loader,
options,
browserslist,
styleLoaderOption
}) {
function applyLoaders(rule, isCSSModules) {
if (isDev) {
rule.use('extra-css-loader')
.loader(require.resolve('style-loader'))
.options(Object.assign({}, styleLoaderOption));
} else {
rule.use('extra-css-loader')
.loader(require('mini-css-extract-plugin').loader)
.options({
});
}
rule.use('css-loader')
.loader(require.resolve('css-loader'))
.options(
deepmerge(
{
importLoaders: 1,
// https://webpack.js.org/loaders/css-loader/#onlylocals
...(isCSSModules
? {
modules: {
localIdentName: '[local]___[hash:base64:5]'
}
}
: {})
},
config.cssLoader || {}
)
);
rule.use('postcss-loader')
.loader(require.resolve('postcss-loader'))
.options(deepmerge({
postcssOptions: () => ({
plugins: [
// https://github.com/luisrudge/postcss-flexbugs-fixes
require('postcss-flexbugs-fixes'),
require('postcss-safe-parser'),
[require('autoprefixer'), { ...config.autoprefixer, overrideBrowserslist: browserslist }],
...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : [])
]
})
}, config.postcssLoader || {}));
if (loader) {
rule.use(loader)
.loader(require.resolve(loader))
.options(options);
}
}
const rule = webpackConfig.module.rule(lang).test(test);
applyLoaders(rule.oneOf('css-modules').resourceQuery(/module/), true);
applyLoaders(rule.oneOf('css'), false);
}
export default function createCssWebpackConfig({
isDev,
config,
webpackConfig,
browserslist
}) {
createRules({
isDev,
webpackConfig,
config,
lang: 'css',
test: /\.css$/,
browserslist
});
createRules({
isDev,
webpackConfig,
config,
lang: 'less',
test: /\.less$/,
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
...config.lessLoader
}
},
browserslist
});
if (!isDev) {
webpackConfig.plugin('extra-css')
.use(require.resolve('mini-css-extract-plugin'), [{
filename: '[name].[contenthash:8].css',
chunkFilename: '[id].[contenthash:8].css'
}]);
webpackConfig.optimization
.minimizer('css')
.use(require.resolve('css-minimizer-webpack-plugin'), [{}]);
}
return (options) => {
createRules({
isDev,
config,
webpackConfig,
browserslist,
...options
});
};
}

12
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/define.js
View File

@ -1,12 +0,0 @@
import webpack from 'webpack';
import resolveDefine from './resolveDefine';
export default function createDefineWebpackConfig({
config,
webpackConfig
}) {
webpackConfig.plugin('define')
.use(webpack.DefinePlugin, [
resolveDefine(config)
]);
}

12
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index-default.html
View File

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="<%= htmlWebpackPlugin.options.mountElementId %>"></div>
</body>
</html>

13
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/pitcher.js
View File

@ -1,13 +0,0 @@
import qs from 'qs';
const pitcher = code => code;
export const pitch = function () {
const context = this;
const query = qs.parse(context.resourceQuery.slice(1));
if (query.type === 'custom' && query.blockType === 'config') {
return '';
}
};
export default pitcher;

16
packages/fes-preset-built-in/src/plugins/features/autoprefixer.js
View File

@ -1,16 +0,0 @@
export default (api) => {
api.describe({
key: 'autoprefixer',
config: {
default: {
flexbox: 'no-2009'
},
schema(joi) {
return joi
.object()
.description('postcss autoprefixer, default flexbox: no-2009');
}
}
});
};

5
packages/fes-preset-built-in/src/plugins/features/base.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'base',
@ -6,7 +5,7 @@ export default (api) => {
default: '',
schema(joi) {
return joi.string().allow('');
}
}
},
},
});
};

13
packages/fes-preset-built-in/src/plugins/features/checkVuePackage.js
View File

@ -7,22 +7,19 @@ export default (api) => {
schema(joi) {
return joi.object();
},
default: {
}
}
default: {},
},
});
api.onStart(() => {
// eslint-disable-next-line import/no-extraneous-dependencies
const vuePkg = require('vue/package.json');
const vueCompilerPkg = require('@vue/compiler-sfc/package.json');
if (
!semver.satisfies(vuePkg.version, `~${vueCompilerPkg.version.replace(/\d+$/, '0')}`, { includePrerelease: true })
) {
if (!semver.satisfies(vuePkg.version, `~${vueCompilerPkg.version.replace(/\d+$/, '0')}`, { includePrerelease: true })) {
console.log(
chalk.red(
`You are using vue@${vuePkg.version}, requires @vue/compiler-sfc@${vuePkg.version}.\nPlease upgrade your @vue/compiler-sfc@${vueCompilerPkg.version} version.`
)
`You are using vue@${vuePkg.version}, requires @vue/compiler-sfc@${vuePkg.version}.\nPlease upgrade your @vue/compiler-sfc@${vueCompilerPkg.version} version.`,
),
);
process.exit(1);
}

37
packages/fes-preset-built-in/src/plugins/features/cssLoader.js
View File

@ -1,37 +0,0 @@
export default (api) => {
api.describe({
key: 'cssLoader',
config: {
default: {},
schema(joi) {
return joi
.object({
url: joi.alternatives(joi.boolean(), joi.function()),
import: joi.alternatives(joi.boolean(), joi.function()),
modules: joi.alternatives(
joi.boolean(),
joi.string(),
joi.object()
),
sourceMap: joi.boolean(),
importLoaders: joi.number(),
onlyLocals: joi.boolean(),
esModule: joi.boolean(),
localsConvention: joi
.string()
.valid(
'asIs',
'camelCase',
'camelCaseOnly',
'dashes',
'dashesOnly'
)
})
.description(
'more css-loader options see https://webpack.js.org/loaders/css-loader/#options'
);
}
}
});
};

5
packages/fes-preset-built-in/src/plugins/features/dynamicImport.js
View File

@ -1,12 +1,11 @@
export default (api) => {
api.describe({
key: 'dynamicImport',
config: {
schema(joi) {
return joi.boolean();
}
},
default: false
},
default: false,
});
};

21
packages/fes-preset-built-in/src/plugins/features/globalCSS.js
View File

@ -4,25 +4,14 @@ import { existsSync } from 'fs';
export default (api) => {
const {
paths,
utils: { winPath }
utils: { winPath },
} = api;
const { absSrcPath = '', absTmpPath = '' } = paths;
const files = [
'global.css',
'global.less',
'global.scss',
'global.sass',
'global.styl',
'global.stylus'
];
const files = ['global.css', 'global.less', 'global.scss', 'global.sass', 'global.styl', 'global.stylus'];
const globalCSSFile = files
.map(file => join(absSrcPath || '', file))
.filter(file => existsSync(file))
.map((file) => join(absSrcPath || '', file))
.filter((file) => existsSync(file))
.slice(0, 1);
api.addEntryCodeAhead(
() => `${globalCSSFile
.map(file => `require('${winPath(relative(absTmpPath, file))}');`)
.join('')}`
);
api.addEntryCodeAhead(() => `${globalCSSFile.map((file) => `require('${winPath(relative(absTmpPath, file))}');`).join('')}`);
};

16
packages/fes-preset-built-in/src/plugins/features/html.js
View File

@ -1,16 +0,0 @@
export default (api) => {
api.describe({
key: 'html',
config: {
schema(joi) {
return joi
.object()
.description(
'more html-webpack-plugin options see https://github.com/jantimon/html-webpack-plugin#configuration'
);
},
default: {
}
}
});
};

36
packages/fes-preset-built-in/src/plugins/features/mock.js
View File

@ -25,7 +25,7 @@ export default (api) => {
});
api.babelRegister.setOnlyMap({
key: 'mock',
value: [...paths, ...requireDeps]
value: [...paths, ...requireDeps],
});
};
@ -34,9 +34,9 @@ export default (api) => {
config: {
schema(joi) {
return joi.alternatives(joi.boolean(), joi.object());
}
},
enableBy: () => process.env.NODE_ENV === 'development'
},
enableBy: () => process.env.NODE_ENV === 'development',
});
// 对 array、object 遍历处理
@ -57,11 +57,11 @@ export default (api) => {
// 默认配置
const option = {
headers: {
'Cache-Control': 'no-cache'
'Cache-Control': 'no-cache',
},
statusCode: 200,
cookies: [],
timeout: 0
timeout: 0,
};
if (len === 0) return option;
if (len === 1) {
@ -69,12 +69,9 @@ export default (api) => {
if (lodash.isPlainObject(newOption)) {
traversalHandler(newOption, (value, key) => {
if (key === 'headers') {
traversalHandler(
newOption.headers,
(headervalue, headerkey) => {
traversalHandler(newOption.headers, (headervalue, headerkey) => {
option.headers[headerkey] = newOption.headers[headerkey];
}
);
});
} else {
option[key] = newOption[key];
}
@ -107,9 +104,7 @@ export default (api) => {
// mock打开情况下，配置的过滤前缀
const mockPrefixTemp = api.config.mock.prefix || mockPrefix;
mockPrefix = mockPrefixTemp === mockPrefix
? mockPrefixTemp
: `${mockPrefixTemp}/`;
mockPrefix = mockPrefixTemp === mockPrefix ? mockPrefixTemp : `${mockPrefixTemp}/`;
// mock文件处理
mockFile = parsePath('./mock.js');
if (!existsSync(mockFile)) {
@ -141,9 +136,7 @@ export default (api) => {
return next();
}
// 请求以 cgiMock.prefix 开头，匹配处理
const matchRequet = requestList.find(
item => req.path.search(item.url) !== -1
);
const matchRequet = requestList.find((item) => req.path.search(item.url) !== -1);
if (!matchRequet) {
return next();
}
@ -167,10 +160,7 @@ export default (api) => {
// do result
if (lodash.isFunction(matchRequet.result)) {
matchRequet.result(req, res);
} else if (
lodash.isArray(matchRequet.result)
|| lodash.isPlainObject(matchRequet.result)
) {
} else if (lodash.isArray(matchRequet.result) || lodash.isPlainObject(matchRequet.result)) {
!matchRequet.type && res.type('json');
res.json(matchRequet.result);
} else {
@ -191,15 +181,13 @@ export default (api) => {
api.onStart(() => {
// 获取mock配置: 是否打开
mockFlag = lodash.isPlainObject(api.config.mock)
? true
: api.config.mock;
mockFlag = lodash.isPlainObject(api.config.mock) ? true : api.config.mock;
if (!mockFlag) return;
loadMock = createMock();
return chokidar
.watch(mockFile, {
ignoreInitial: true
ignoreInitial: true,
})
.on('change', () => {
api.logger.info('mock.js changed，reload');

5
packages/fes-preset-built-in/src/plugins/features/mountElementId.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'mountElementId',
@ -6,7 +5,7 @@ export default (api) => {
default: 'app',
schema(joi) {
return joi.string().allow('');
}
}
},
},
});
};

14
packages/fes-preset-built-in/src/plugins/features/outputPath.js
View File

@ -1,14 +0,0 @@
export default (api) => {
api.describe({
key: 'outputPath',
config: {
default: 'dist',
schema(joi) {
return joi
.string()
.not('src', 'public', 'pages', 'mock', 'config')
.allow('');
}
}
});
};

5
packages/fes-preset-built-in/src/plugins/features/plugins.js
View File

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

5
packages/fes-preset-built-in/src/plugins/features/proxy.js
View File

@ -1,4 +1,3 @@
export default (api) => {
api.describe({
key: 'proxy',
@ -8,7 +7,7 @@ export default (api) => {
},
schema(joi) {
return joi.object();
}
}
},
},
});
};

14
packages/fes-preset-built-in/src/plugins/features/publicPath.js
View File

@ -1,14 +0,0 @@
export default (api) => {
api.describe({
key: 'publicPath',
config: {
default: '/',
schema(joi) {
return joi
.string()
.regex(/\/$/)
.error(new Error('config.publicPath must end with /.'));
}
}
});
};

7
packages/fes-preset-built-in/src/plugins/features/singular.js
View File

@ -4,9 +4,8 @@ export default (api) => {
config: {
default: false,
schema(joi) {
return joi
.boolean();
}
}
return joi.boolean();
},
},
});
};

16
packages/fes-preset-built-in/src/plugins/features/vueLoader.js
View File

@ -1,16 +0,0 @@
export default (api) => {
api.describe({
key: 'vueLoader',
config: {
schema(joi) {
return joi
.object({})
.description(
'more vue-loader options see https://vue-loader.vuejs.org/'
);
}
}
});
};

12
packages/fes-preset-built-in/src/plugins/generateFiles/core/exports/coreExports.js
View File

@ -8,21 +8,23 @@ export default function (api) {
const coreExports = await api.applyPlugins({
key: 'addCoreExports',
type: api.ApplyPluginsType.add,
initialValue: []
initialValue: [],
});
const fesExportsHook = {}; // repeated definition
const absoluteFilePath = 'core/coreExports.js';
const content = `${coreExports
.map(item => generateExports(absoluteFilePath, {
.map((item) =>
generateExports(absoluteFilePath, {
item,
fesExportsHook
}))
fesExportsHook,
}),
)
.join('\n')}\n`;
const tpl = readFileSync(join(__dirname, './coreExports.tpl'), 'utf-8');
api.writeTmpFile({
path: absoluteFilePath,
content: tpl.replace('CORE_EXPORTS', content).replace('RUNTIME_PATH', runtimePath)
content: tpl.replace('CORE_EXPORTS', content).replace('RUNTIME_PATH', runtimePath),
});
});
}

5
packages/fes-preset-built-in/src/plugins/generateFiles/core/exports/coreExports.tpl
View File

@ -15,8 +15,3 @@ export {
} from 'RUNTIME_PATH';
CORE_EXPORTS
// TODO 优化，放到合适的位置，不能放在 routes，会造成循环依赖
export const defineRouteMeta = (param)=>{
return param
}

34
packages/fes-preset-built-in/src/plugins/generateFiles/core/plugin/index.js
View File

@ -2,13 +2,11 @@ import { readFileSync } from 'fs';
import { join } from 'path';
import { winPath } from '@fesjs/utils';
import { runtimePath } from '../../../../utils/constants';
import { getAppPath } from '../../../../utils/getAppEntryPath';
export default function (api) {
const {
paths,
utils: { Mustache }
utils: { Mustache, getAppEntryPath },
} = api;
const absoluteFilePath = 'core/plugin.js';
@ -32,42 +30,34 @@ export default function (api) {
// 修改histror
'modifyCreateHistroy',
// 生成router时触发
'onRouterCreated'
]
'onRouterCreated',
],
});
const plugins = await api.applyPlugins({
key: 'addRuntimePlugin',
type: api.ApplyPluginsType.add,
initialValue: [
getAppPath(paths.absSrcPath)
].filter(Boolean)
initialValue: [getAppEntryPath(paths.absSrcPath)].filter(Boolean),
});
api.writeTmpFile({
path: absoluteFilePath,
content: Mustache.render(
readFileSync(join(__dirname, 'plugin.tpl'), 'utf-8'),
{
content: Mustache.render(readFileSync(join(__dirname, 'plugin.tpl'), 'utf-8'), {
validKeys,
runtimePath
}
)
runtimePath,
}),
});
api.writeTmpFile({
path: 'core/pluginRegister.js',
content: Mustache.render(
readFileSync(join(__dirname, 'pluginRegister.tpl'), 'utf-8'),
{
content: Mustache.render(readFileSync(join(__dirname, 'pluginRegister.tpl'), 'utf-8'), {
plugins: plugins.map((plugin, index) => ({
index,
path: winPath(plugin)
}))
}
)
path: winPath(plugin),
})),
}),
});
});
api.addCoreExports(() => ({
specifiers: ['plugin'],
source: absoluteFilePath
source: absoluteFilePath,
}));
}

43
packages/fes-preset-built-in/src/plugins/registerMethods.js
View File

@ -1,8 +1,6 @@
import assert from 'assert';
import { dirname, join } from 'path';
import {
existsSync, statSync, readFileSync, writeFileSync, copyFileSync
} from 'fs';
import { existsSync, statSync, readFileSync, writeFileSync, copyFileSync } from 'fs';
export default function (api) {
[
@ -26,48 +24,31 @@ export default function (api) {
'modifyBabelPresetOpts',
'chainWebpack',
'addTmpGenerateWatcherPaths',
'modifyPublicPathStr'
'modifyPublicPathStr',
].forEach((name) => {
api.registerMethod({ name });
});
api.registerMethod({
name: 'writeTmpFile',
fn({
path,
content
}) {
assert(
api.stage >= api.ServiceStage.pluginReady,
'api.writeTmpFile() should not execute in register stage.'
);
fn({ path, content }) {
assert(api.stage >= api.ServiceStage.pluginReady, 'api.writeTmpFile() should not execute in register stage.');
const absPath = join(api.paths.absTmpPath, path);
api.utils.mkdirp.sync(dirname(absPath));
if (!existsSync(absPath) || readFileSync(absPath, 'utf-8') !== content) {
writeFileSync(absPath, content, 'utf-8');
}
}
},
});
api.registerMethod({
name: 'copyTmpFiles',
fn({
namespace, path, ignore
}) {
assert(
api.stage >= api.ServiceStage.pluginReady,
'api.copyTmpFiles() should not execute in register stage.'
);
assert(
path,
'api.copyTmpFiles() should has param path'
);
assert(
namespace,
'api.copyTmpFiles() should has param namespace'
);
fn({ namespace, path, ignore }) {
assert(api.stage >= api.ServiceStage.pluginReady, 'api.copyTmpFiles() should not execute in register stage.');
assert(path, 'api.copyTmpFiles() should has param path');
assert(namespace, 'api.copyTmpFiles() should has param namespace');
const files = api.utils.glob.sync('**/*', {
cwd: path
cwd: path,
});
const base = join(api.paths.absTmpPath, namespace);
files.forEach((file) => {
@ -79,13 +60,13 @@ export default function (api) {
if (statSync(source).isDirectory()) {
api.utils.mkdirp.sync(target);
} else if (Array.isArray(ignore)) {
if (!ignore.some(pattern => new RegExp(pattern).test(file))) {
if (!ignore.some((pattern) => new RegExp(pattern).test(file))) {
copyFileSync(source, target);
}
} else {
copyFileSync(source, target);
}
});
}
},
});
}

17
packages/fes-preset-built-in/src/plugins/misc/route/index.js → packages/fes-preset-built-in/src/plugins/route/index.js
View File

@ -3,7 +3,7 @@ import { join, extname, posix, basename } from 'path';
import { lodash, parser, generator } from '@fesjs/utils';
import { parse } from '@vue/compiler-sfc';
import { Logger } from '@fesjs/compiler';
import { runtimePath } from '../../../utils/constants';
import { runtimePath } from '../../utils/constants';
const logger = new Logger('fes:router');
@ -314,6 +314,7 @@ export default function (api) {
const namespace = 'core/routes';
const absCoreFilePath = join(namespace, 'routes.js');
const absExportsFilePath = join(namespace, 'routeExports.js');
const absRuntimeFilePath = join(namespace, 'runtime.js');
@ -326,13 +327,19 @@ export default function (api) {
api.onGenerateFiles(async () => {
const routesTpl = readFileSync(join(__dirname, 'template/routes.tpl'), 'utf-8');
const routes = await api.getRoutes();
api.writeTmpFile({
path: absCoreFilePath,
content: Mustache.render(routesTpl, {
runtimePath,
COMPONENTS_IMPORT: genComponentImportExpression(routes, api.config).join('\n'),
routes: await api.getRoutesJSON(),
}),
});
const routeExportsTpl = readFileSync(join(__dirname, 'template/routeExports.tpl'), 'utf-8');
api.writeTmpFile({
path: absExportsFilePath,
content: Mustache.render(routeExportsTpl, {
runtimePath,
config: api.config,
routerBase: api.config.base,
CREATE_HISTORY: historyType[api.config.router.mode] || 'createWebHashHistory',
@ -347,8 +354,8 @@ export default function (api) {
api.addCoreExports(() => [
{
specifiers: ['getRoutes', 'getRouter', 'getHistory', 'destroyRouter'],
source: absCoreFilePath,
specifiers: ['getRouter', 'getHistory', 'destroyRouter', 'defineRouteMeta'],
source: absExportsFilePath,
},
]);

11
packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl → packages/fes-preset-built-in/src/plugins/route/template/routeExports.tpl
View File

@ -1,13 +1,6 @@
import { createRouter as createVueRouter, {{{ CREATE_HISTORY }}}, ApplyPluginsType } from '{{{ runtimePath }}}';
import { plugin } from '../plugin';
{{{ COMPONENTS_IMPORT }}}
export function getRoutes() {
const routes = {{{ routes }}};
return routes;
}
const ROUTER_BASE = '{{{ routerBase }}}';
let router = null;
let history = null;
@ -62,3 +55,7 @@ export const destroyRouter = ()=>{
router = null;
history = null;
}
export const defineRouteMeta = (param)=>{
return param
}

9
packages/fes-preset-built-in/src/plugins/route/template/routes.tpl Normal file
View File

@ -0,0 +1,9 @@
{{{ COMPONENTS_IMPORT }}}
export function getRoutes() {
const routes = {{{ routes }}};
return routes;
}

2
packages/fes-preset-built-in/src/plugins/misc/route/template/runtime.tpl → packages/fes-preset-built-in/src/plugins/route/template/runtime.tpl
View File

@ -1,4 +1,4 @@
import { createRouter } from "./routes";
import { createRouter } from "./routeExports";
export function onAppCreated({ app, routes }) {
const router = createRouter(routes);

4
packages/fes-preset-built-in/src/utils/constants.js
View File

@ -1,6 +1,4 @@
import { winPath } from '@fesjs/utils';
import { dirname } from 'path';
export const runtimePath = winPath(
dirname(require.resolve('@fesjs/runtime/package.json'))
);
export const runtimePath = winPath(dirname(require.resolve('@fesjs/runtime/package.json')));

50
packages/fes-preset-built-in/src/utils/generateExports.js
View File

@ -3,58 +3,28 @@ import assert from 'assert';
import path from 'path';
const reserveLibrarys = ['fes']; // reserve library
// todo 插件导出内容冲突问题待解决
const reserveExportsNames = [
'Link',
'NavLink',
'Redirect',
'dynamic',
'withRouter',
'Route'
];
// todo 插件导出内容冲突问题待解决
const reserveExportsNames = ['Link', 'NavLink', 'Redirect', 'dynamic', 'withRouter', 'Route'];
export default function generateExports(basePath, { item, fesExportsHook }) {
assert(item.source, 'source should be supplied.');
const source = path.relative(path.basename(basePath), item.source);
assert(
item.exportAll || item.specifiers,
'exportAll or specifiers should be supplied.'
);
assert(
!reserveLibrarys.includes(source),
`${source} is reserve library, Please don't use it.`
);
assert(item.exportAll || item.specifiers, 'exportAll or specifiers should be supplied.');
assert(!reserveLibrarys.includes(source), `${source} is reserve library, Please don't use it.`);
if (item.exportAll) {
return `export * from '${winPath(source)}';`;
}
assert(
Array.isArray(item.specifiers),
`specifiers should be Array, but got ${item.specifiers.toString()}.`
);
assert(Array.isArray(item.specifiers), `specifiers should be Array, but got ${item.specifiers.toString()}.`);
const specifiersStrArr = item.specifiers.map((specifier) => {
if (typeof specifier === 'string') {
assert(
!reserveExportsNames.includes(specifier),
`${specifier} is reserve name, you can use 'exported' to set alias.`
);
assert(
!fesExportsHook[specifier],
`${specifier} is Defined, you can use 'exported' to set alias.`
);
assert(!reserveExportsNames.includes(specifier), `${specifier} is reserve name, you can use 'exported' to set alias.`);
assert(!fesExportsHook[specifier], `${specifier} is Defined, you can use 'exported' to set alias.`);
fesExportsHook[specifier] = true;
return specifier;
}
assert(
lodash.isPlainObject(specifier),
`Configure item context should be Plain Object, but got ${specifier}.`
);
assert(
specifier.local && specifier.exported,
'local and exported should be supplied.'
);
assert(lodash.isPlainObject(specifier), `Configure item context should be Plain Object, but got ${specifier}.`);
assert(specifier.local && specifier.exported, 'local and exported should be supplied.');
return `${specifier.local} as ${specifier.exported}`;
});
return `export { ${specifiersStrArr.join(', ')} } from '${winPath(
source
)}';`;
return `export { ${specifiersStrArr.join(', ')} } from '${winPath(source)}';`;
}

22
packages/fes-template-h5/.fes.js
View File

@ -34,15 +34,15 @@ export default {
devServer: {
port: 8000
},
// windicss: {
// config: {
// theme: {
// extend: {
// colors: {
// green: '#7cb305'
// }
// }
// }
// }
// }
windicss: {
config: {
theme: {
extend: {
colors: {
green: '#7cb305'
}
}
}
}
}
};

2
packages/fes-template-h5/package.json
View File

@ -47,6 +47,8 @@
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-icon": "^2.0.0",
"@fesjs/plugin-request": "^2.0.0",
"@fesjs/plugin-windicss": "^2.0.8",
"@fesjs/build-webpack": "^1.0.0",
"vue": "^3.2.2"
},
"private": true

10
packages/fes-template-h5/src/pages/test.jsx
View File

@ -1,12 +1,10 @@
import { defineRouteMeta, useRoute } from '@fesjs/fes';
import { defineComponent } from 'vue';
// console.log(defineRouteMeta);
// defineRouteMeta({
// title: 'test',
// name: 'test',
// });
defineRouteMeta({
title: 'test',
name: 'test',
});
export default defineComponent({
setup() {

55
packages/fes-utils/src/generateFiles.js Normal file
View File

@ -0,0 +1,55 @@
import * as chokidar from 'chokidar';
import lodash from 'lodash';
import winPath from './winPath';
import getAppPath from './getAppEntryPath';
export default async ({ api, watch }) => {
const { paths } = api;
async function generate() {
api.logger.debug('generate files');
await api.applyPlugins({
key: 'onGenerateFiles',
type: api.ApplyPluginsType.event,
});
}
let watchers = [];
await generate();
function unwatch() {
watchers.forEach((watcher) => {
watcher.close();
});
watchers = [];
}
function createWatcher(path) {
const watcher = chokidar.watch(path, {
// ignore .dotfiles and _mock.js
ignored: /(^|[/\\])(_mock.js$|\..)/,
ignoreInitial: true,
});
watcher.on(
'all',
lodash.throttle(async () => {
await generate();
}, 100),
);
watchers.push(watcher);
}
if (watch) {
const watcherPaths = await api.applyPlugins({
key: 'addTmpGenerateWatcherPaths',
type: api.ApplyPluginsType.add,
initialValue: [paths.absPagesPath, getAppPath(paths.absSrcPath)],
});
lodash.uniq(watcherPaths.map((p) => winPath(p))).forEach((p) => {
createWatcher(p);
});
}
return unwatch;
};

Some files were not shown because too many files have changed in this diff Show More