From f5abb9a3a615e294f33b6232b583dc2f99a74a10 Mon Sep 17 00:00:00 2001 From: Diablohu Date: Wed, 8 Jan 2020 21:13:06 +0800 Subject: [PATCH] fix #202 --- CHANGELOG.md | 1 + packages/koot-boilerplate/koot.config.js | 13 +- .../transform-config-client-dev-dll.js | 154 ++++++++++++++++++ .../factory-config/transform-config-last.js | 58 +------ packages/koot/bin/dev.js | 6 +- test/projects/simple/koot.config.js | 24 +-- test/projects/standard/koot.config.js | 10 -- test/projects/standard/koot.config.minimum.js | 61 +++---- 8 files changed, 200 insertions(+), 127 deletions(-) create mode 100644 packages/koot-webpack/factory-config/transform-config-client-dev-dll.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 8532e1b7..9e8d63cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -47,6 +47,7 @@ - 现在同时支持 _ES Module_ 和 _CommonJS_ 引用方式 - 优化打包和进入开发环境时的错误日志显示 - 使用 `import()` 时，如果 `webpackChunkName` 注释选项中包含特殊字符，现在会自动转换为文件名安全的字符 ([#190](https://github.com/cmux/koot/issues/190)) + - 扩充配置 `devDll` - 错误修正 - 客户端生命周期 `before()` 和 `after()` 现在会传入正确的参数 ([#198](https://github.com/cmux/koot/issues/198)) diff --git a/packages/koot-boilerplate/koot.config.js b/packages/koot-boilerplate/koot.config.js index 9bb442a1..9c77fe7b 100644 --- a/packages/koot-boilerplate/koot.config.js +++ b/packages/koot-boilerplate/koot.config.js @@ -133,17 +133,6 @@ module.exports = { * 开发环境 *************************************************************************/ - devPort: 3088, - devDll: [ - 'react', - 'react-dom', - 'redux', - 'react-redux', - 'react-router', - 'react-router-redux', - 'koot', - 'axios', - 'classnames' - ] + devPort: 3088 // 更多选项请查阅文档... }; diff --git a/packages/koot-webpack/factory-config/transform-config-client-dev-dll.js b/packages/koot-webpack/factory-config/transform-config-client-dev-dll.js new file mode 100644 index 00000000..72cd618c --- /dev/null +++ b/packages/koot-webpack/factory-config/transform-config-client-dev-dll.js @@ -0,0 +1,154 @@ +const path = require('path'); +const webpack = require('webpack'); +const resolve = require('enhanced-resolve'); + +const { + keyConfigBuildDll, + filenameDll, + filenameDllManifest +} = require('koot/defaults/before-build'); +const getDirDevDll = require('koot/libs/get-dir-dev-dll'); +const getCwd = require('koot/utils/get-cwd'); + +// ============================================================================ + +const defaultModules = [ + // Koot + 'koot', + + // React + 'react', + 'react-dom', + 'redux', + 'react-redux', + 'react-router', + 'react-router-redux', + 'prop-types', + + // Ant-Design related + 'antd', + '@ant-design/icons', + 'moment', + 'rc-align', + 'rc-animate', + 'rc-calendar', + 'rc-checkbox', + 'rc-form', + 'rc-menu', + 'rc-notification', + 'rc-pagination', + 'rc-progress', + 'rc-resize-observer', + 'rc-select', + 'rc-tabs', + 'rc-tooltip', + 'rc-trigger', + 'rc-upload', + // 'rc-util' + + // Common Libraries + 'add-dom-event-listener', + 'async-validator', + 'axios', + 'classnames', + 'core-js', + 'create-react-class', + 'css-animation', + 'date-fns', + 'dom-align', + 'dom-scroll-into-view', + 'fbjs', + 'gud', + 'hoist-non-react-statics', + 'is-mobile', + 'lodash', + 'memoize-one', + 'merge-anything', + 'mini-store', + 'object-assign', + 'omit.js', + 'performance-now', + 'process', + 'query-string', + 'raf', + 'react-is', + 'react-lifecycles-compat', + 'resize-observer-polyfill', + 'scheduler', + 'strict-uri-encode', + 'styled-components', + 'stylis', + 'stylis-rule-sheet', + 'tinycolor2', + 'warning' +]; + +// ============================================================================ + +/** 将目标 _Webpack_ 配置对象转换为 **客户端-开发环境-DLL** 配置 */ +const transformClientDevDll = async ( + config = {}, + kootConfigForThisBuild = {} +) => { + const { + [keyConfigBuildDll]: createDll = false, + // dist, + devDll: webpackDll = [] + } = kootConfigForThisBuild; + + if (!createDll) return config; + + const result = Array.isArray(config) ? { ...config[0] } : { ...config }; + delete result.watch; + delete result.watchOptions; + + const rawList = + Array.isArray(webpackDll) && webpackDll.length + ? webpackDll + : defaultModules; + + // 如果自行添加了 koot，排除 + if (rawList.includes('koot')) rawList.splice(rawList.indexOf('koot'), 1); + + /** @type {string[]} 依据本地安装的依赖包最终过滤的 DLL 内容列表 */ + const library = []; + for (const m of rawList) { + await new Promise(r => { + resolve(getCwd(), m, (err, result) => { + if (!err && typeof result === 'string' && !!result) + library.push(m); + r(); + }); + }); + } + + result.entry = { + library + }; + + // console.log('result.entry.library', result.entry.library) + result.output = { + filename: filenameDll, + library: '[name]_[hash]', + // path: STAGE === 'server' ? path.resolve(dist, 'server') : dist + path: getDirDevDll() + }; + process.env.KOOT_DEV_DLL_FILE_CLIENT = path.resolve( + getDirDevDll(undefined, 'client'), + filenameDll + ); + process.env.KOOT_DEV_DLL_FILE_SERVER = path.resolve( + getDirDevDll(undefined, 'server'), + filenameDll + ); + result.plugins.push( + new webpack.DllPlugin({ + // context: path.resolve(__dirname, '../../../../'), + path: path.resolve(result.output.path, filenameDllManifest), + name: '[name]_[hash]' + }) + ); + return result; +}; + +module.exports = transformClientDevDll; diff --git a/packages/koot-webpack/factory-config/transform-config-last.js b/packages/koot-webpack/factory-config/transform-config-last.js index f32a5989..3db0c1c0 100644 --- a/packages/koot-webpack/factory-config/transform-config-last.js +++ b/packages/koot-webpack/factory-config/transform-config-last.js @@ -4,7 +4,6 @@ const webpack = require('webpack'); const { keyConfigBuildDll, - filenameDll, filenameDllManifest, keyConfigOutputPathShouldBe, keyConfigWebpackSPATemplateInject, @@ -13,6 +12,7 @@ const { } = require('koot/defaults/before-build'); const getDirDevDll = require('koot/libs/get-dir-dev-dll'); +const transformClientDevDll = require('./transform-config-client-dev-dll'); const forWebpackVersion = require('../libs/for-webpack-version'); /** @@ -23,65 +23,17 @@ const forWebpackVersion = require('../libs/for-webpack-version'); * @return {Object|Array} */ const transform = async (config, kootConfigForThisBuild = {}, index = 0) => { - const { - [keyConfigBuildDll]: createDll = false, - // dist, - devDll: webpackDll = [] - } = kootConfigForThisBuild; + const { [keyConfigBuildDll]: createDll = false } = kootConfigForThisBuild; // const { // WEBPACK_BUILD_STAGE: STAGE, // } = process.env // 生成 DLL 包模式: 本次打包仅生成 DLL 包 if (createDll) { - const defaults = [ - 'react', - 'react-dom', - 'redux', - 'redux-thunk', - 'react-redux', - 'react-router', - 'react-router-redux' - // 'koot', - ]; - const result = Array.isArray(config) ? { ...config[0] } : { ...config }; - delete result.watch; - delete result.watchOptions; - - // 如果自行添加了 koot，排除 - const library = - !Array.isArray(webpackDll) || !webpackDll.length - ? defaults - : webpackDll; - if (library.includes('koot')) - library.splice(library.indexOf('koot'), 1); - result.entry = { - library - }; - - // console.log('result.entry.library', result.entry.library) - result.output = { - filename: filenameDll, - library: '[name]_[hash]', - // path: STAGE === 'server' ? path.resolve(dist, 'server') : dist - path: getDirDevDll() - }; - process.env.KOOT_DEV_DLL_FILE_CLIENT = path.resolve( - getDirDevDll(undefined, 'client'), - filenameDll - ); - process.env.KOOT_DEV_DLL_FILE_SERVER = path.resolve( - getDirDevDll(undefined, 'server'), - filenameDll - ); - result.plugins.push( - new webpack.DllPlugin({ - // context: path.resolve(__dirname, '../../../../'), - path: path.resolve(result.output.path, filenameDllManifest), - name: '[name]_[hash]' - }) + return validate( + await transformClientDevDll(config, kootConfigForThisBuild), + kootConfigForThisBuild ); - return validate(result, kootConfigForThisBuild); } // 数组情况，拆分每项分别处理 diff --git a/packages/koot/bin/dev.js b/packages/koot/bin/dev.js index 5a2e8164..a571daca 100755 --- a/packages/koot/bin/dev.js +++ b/packages/koot/bin/dev.js @@ -379,7 +379,11 @@ const run = async () => { } catch (e) { waiting.stop(); spinner(msg).fail(); - if (Array.isArray(result.errors) && result.errors.length) { + if ( + result && + Array.isArray(result.errors) && + result.errors.length + ) { error = result.errors; result.errors.forEach(e => console.error(e)); } else { diff --git a/test/projects/simple/koot.config.js b/test/projects/simple/koot.config.js index 16245ee2..1ef35ff7 100644 --- a/test/projects/simple/koot.config.js +++ b/test/projects/simple/koot.config.js @@ -31,6 +31,10 @@ module.exports = { if (ENV === 'prod') return await require('./config/webpack/prod')(); return {}; }, + + webpackBefore: async (kootConfigWithExtra = {}) => { + console.log(kootConfigWithExtra); + }, // webpackBefore: async (kootConfigWithExtra = {}) => { // const { // __WEBPACK_OUTPUT_PATH, @@ -55,16 +59,16 @@ module.exports = { // bundleVersionsKeep: false, devPort: 3081, - devDll: [ - 'react', - 'react-dom', - 'redux', - 'redux-thunk', - 'react-redux', - 'react-router', - 'react-router-redux', - 'koot' - ], + // devDll: [ + // 'react', + // 'react-dom', + // 'redux', + // 'redux-thunk', + // 'react-redux', + // 'react-router', + // 'react-router-redux', + // 'koot' + // ], devServer: { proxy: { // '/proxy-1': { diff --git a/test/projects/standard/koot.config.js b/test/projects/standard/koot.config.js index 8732957d..2d0d3772 100644 --- a/test/projects/standard/koot.config.js +++ b/test/projects/standard/koot.config.js @@ -138,16 +138,6 @@ module.exports = { *************************************************************************/ devPort: 3080, - devDll: [ - 'react', - 'react-dom', - 'redux', - 'redux-thunk', - 'react-redux', - 'react-router', - 'react-router-redux', - 'koot' - ], // devHmr: { // multiStep: false // }, diff --git a/test/projects/standard/koot.config.minimum.js b/test/projects/standard/koot.config.minimum.js index af09ace6..16b30e18 100644 --- a/test/projects/standard/koot.config.minimum.js +++ b/test/projects/standard/koot.config.minimum.js @@ -1,16 +1,15 @@ /** * @module kootConfig - * + * * Koot.js 项目配置 - * + * * 配置文档请查阅: [https://koot.js.org/#/config] */ -const fs = require('fs-extra') -const path = require('path') +const fs = require('fs-extra'); +const path = require('path'); module.exports = { - /************************************************************************** * 项目信息 *************************************************************************/ @@ -22,7 +21,7 @@ module.exports = { i18n: [ ['zh', './src/locales/zh.json'], ['zh-tw', './src/locales/zh-tw.json'], - ['en', './src/locales/en.json'], + ['en', './src/locales/en.json'] ], aliases: { '@src': path.resolve('./src'), @@ -33,29 +32,29 @@ module.exports = { '@store': path.resolve('./src/store'), '@views': path.resolve('./src/views'), '@server': path.resolve('./server'), - "~base.less": path.resolve('./src/constants/less/base.less'), - "~Assets": path.resolve('./src/assets'), - "~/": path.resolve('./src') + '~base.less': path.resolve('./src/constants/less/base.less'), + '~Assets': path.resolve('./src/assets'), + '~/': path.resolve('./src') }, defines: { - __QA__: JSON.stringify(false), + __QA__: JSON.stringify(false) }, staticCopyFrom: path.resolve(__dirname, './public'), serverBefore: './server/lifecycle/before', webpackConfig: async () => { - const ENV = process.env.WEBPACK_BUILD_ENV - if (ENV === 'dev') return await require('./config/webpack/dev') - if (ENV === 'prod') return await require('./config/webpack/prod') - return {} + const ENV = process.env.WEBPACK_BUILD_ENV; + if (ENV === 'dev') return await require('./config/webpack/dev'); + if (ENV === 'prod') return await require('./config/webpack/prod'); + return {}; }, webpackBefore: async (/* kootConfig */) => { - console.log('\n\n💢 webpackBefore') + console.log('\n\n💢 webpackBefore'); if (process.env.WEBPACK_BUILD_STAGE === 'client') { - const dist = process.env.KOOT_DIST_DIR - await fs.remove(path.resolve(dist, 'public')) - await fs.remove(path.resolve(dist, 'server')) + const dist = process.env.KOOT_DIST_DIR; + await fs.remove(path.resolve(dist, 'public')); + await fs.remove(path.resolve(dist, 'server')); } - return + return; }, moduleCssFilenameTest: /^((?!\.g\.).)*/, internalLoaderOptions: { @@ -67,35 +66,15 @@ module.exports = { } }, - - - - - - - - - /************************************************************************** * 开发模式 *************************************************************************/ devPort: 3080, - devDll: [ - 'react', - 'react-dom', - 'redux', - 'redux-thunk', - 'react-redux', - 'react-router', - 'react-router-redux', - 'koot', - ], devHmr: { multiStep: false }, devServer: { quiet: true - }, - -} + } +};