fix #202

cmux · Jan 8, 2020 · f5abb9a · f5abb9a
1 parent 7d84b27
commit f5abb9a
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 127 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
     // },