akfun 5.1.10 → 5.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "5.1.10",
+  "version": "5.1.12",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",

package/src/build2esm.js

@@ -12,8 +12,7 @@ async function build2esmFunc(options, curConfig) {
   // create a bundle
   const bundle = await rollup.rollup({
     input: options.input,
-    /** 直接使用webpack中的externals配置（避免再新增一个rollup对应的配置，增加用户的配置复杂度） */
-    external: curConfig.webpack.externals,
+    external: options.externals,
     plugins: options.plugins
   });
 
@@ -38,10 +37,32 @@ module.exports = function (fileName, akfunConfig, _consoleTag) {
   const spinner = ora(`${consoleTag}开启esm模块构建能力...`).start();
   const curRollupConfig = rollupConfig(fileName, config); // 默认配置
   const build2esm = config.build2esm; // 用户的项目配置
+  const curWebpackConfig = config.webpack;
   const compress = build2esm.compress ?? true; // 是否压缩代码
   if (build2esm && build2esm.input) {
     curRollupConfig.input = build2esm.input;
   }
+
+  // 处理 externals，用户手动添加要剔除的依赖
+  let externals = []; // rollup 的 externals 是数组格式
+
+  const webpackExternal = curWebpackConfig.external;
+  if (webpackExternal && isArray(webpackExternal)) {
+    externals = externals.concat(webpackExternal);
+  } else if (webpackExternal && isObject(webpackExternal)) {
+    externals = externals.concat(Object.keys(webpackExternal));
+  }
+
+  const build2esmExternal = build2esm.external;
+  if (build2esmExternal && isArray(build2esmExternal)) {
+    externals = externals.concat(build2esmExternal);
+  } else if (build2esmExternal && isObject(build2esmExternal)) {
+    externals = externals.concat(Object.keys(build2esmExternal));
+  }
+
+  // 添加到 rollup 配置中
+  curRollupConfig.externals = externals;
+
   if (build2esm && build2esm.output) {
     curRollupConfig.output = build2esm.output;
 

package/src/config/default.config.js

@@ -26,7 +26,7 @@ const defaultAKFunConfig = {
     },
     createDeclaration: false, // 打包时是否创建ts声明文件
     ignoreNodeModules: false, // 打包时是否忽略 node_modules
-    externals: [], // 从输出的 bundle 中排除依赖
+    externals: {}, // 从输出的 bundle 中排除依赖
     sassResources: []
   },
   envParams: {

package/src/dev-server.js

@@ -92,15 +92,17 @@ module.exports = function (akfunConfig, _consoleTag) {
   // serve webpack bundle output
   app.use(devMiddleware);
 
-  // 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload
-  const hotMiddleware = require('webpack-hot-middleware')(compiler, {
-    log: false,
-    heartbeat: 2000
-  });
+  if (!curEnvConfig.closeHotReload) {
+    // 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload
+    const hotMiddleware = require('webpack-hot-middleware')(compiler, {
+      log: false,
+      heartbeat: 2000
+    });
 
-  // enable hot-reload and state-preserving
-  // compilation error display
-  app.use(hotMiddleware);
+    // enable hot-reload and state-preserving
+    // compilation error display
+    app.use(hotMiddleware);
+  }
 
   const afterCreateServerAction = (isHttps, port) => {
     spinner.succeed(`${consoleTag}调试模式已开启！`);

package/src/initData/config/akfun.config.js

@@ -33,7 +33,7 @@ module.exports = {
     },
     createDeclaration: false, // 打包时是否创建ts声明文件
     ignoreNodeModules: false, // 打包时是否忽略 node_modules
-    externals: [], // 从输出的 bundle 中排除依赖
+    externals: {}, // 从输出的 bundle 中排除依赖
     template: resolve('src/index.html'), // 默认使用的页面模板
     sassResources: []
   },

package/src/webpack/webpack.base.conf.js

@@ -18,7 +18,7 @@ const projectConfig = require('../config/index');
 const babelConfig = require('../config/babel.config'); // Babel的配置文件
 const { buildBanner } = require('../utils/akfunParams');
 const getJsEntries = require('../utils/jsEntries');
-const { isArray, isFunction } = require('../utils/typeof');
+const { isArray, isFunction, isObject } = require('../utils/typeof');
 
 // 生成构建头部信息
 const BannerPack = new webpack.BannerPlugin({
@@ -29,7 +29,7 @@ const BannerPack = new webpack.BannerPlugin({
 /**
  * webpack.base.conf.js
  * 主要用于设置 rules 和 通用插件
- * _curEnvConfig: 执行环境中的配置，比如：dev、build、build2lib等；
+ * _curEnvConfig: 执行环境中的配置，用于记录 dev、build、build2lib 等对应的配置内容；
  * _akfunConfig：完整的配置对象
  */
 module.exports = (_curEnvConfig, _akfunConfig) => {
@@ -70,19 +70,15 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
     output: {
       filename: '[name].js'
     },
+    watchOptions: {
+      ignored: /node_modules|\.git/, // 忽略 node_modules 和 .git
+      aggregateTimeout: 300 // 文件变化后延迟编译的时间(ms)
+    },
     /**
      * 当webpack试图去加载模块的时候，它默认是查找以 .js 结尾的文件的
      */
     resolve: curWebpackConfig.resolve,
-    externals: curWebpackConfig.ignoreNodeModules
-      ? [
-          nodeExternals({
-            importType: 'commonjs',
-            additionalModuleDirs: curWebpackConfig.additionalModuleDirs || [],
-            allowlist: curWebpackConfig.allowList ? curWebpackConfig.allowList : []
-          })
-        ].concat(curWebpackConfig.externals)
-      : curWebpackConfig.externals,
+    externals: {},
     module: {
       rules: [
         {
@@ -208,28 +204,48 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
       new ProgressBarPlugin()
     ]
   };
+
+  if (curEnvConfig.closeHotReload) {
+    // 关闭热更新，则忽略所有文件变化
+    webpackConfig.watchOptions.ignored = /.*/; // 忽略所有文件变化
+  }
+
+  let ignoreNodeModules = curWebpackConfig.ignoreNodeModules;
   // 优先使用执行环境中的配置
   if (curEnvConfig.ignoreNodeModules !== undefined) {
-    const allowList = curEnvConfig.allowList || curWebpackConfig.allowList;
-    const externals = curEnvConfig.externals || curWebpackConfig.external || [];
-    webpackConfig.externals = curEnvConfig.ignoreNodeModules
-      ? [
-          nodeExternals({
-            importType: 'commonjs',
-            additionalModuleDirs:
-              curEnvConfig.additionalModuleDirs || curWebpackConfig.additionalModuleDirs || [],
-            allowlist: allowList || []
-          })
-        ].concat(externals)
-      : externals;
+    ignoreNodeModules = curEnvConfig.ignoreNodeModules;
+  }
+
+  // allowList 需要开启 ignoreNodeModules 后有效
+  let allowList = curWebpackConfig.allowList || [];
+  if (curEnvConfig.allowList) {
+    allowList = allowList.concat(curEnvConfig.allowList);
+  }
+  // 用户手动添加要剔除的依赖
+  let externals = curWebpackConfig.external || {};
+  if (curEnvConfig.externals && isObject(curEnvConfig.externals)) {
+    externals = Object.assign(externals, curEnvConfig.externals);
   }
+
+  // 设置要剔除的依赖
+  webpackConfig.externals = ignoreNodeModules
+    ? [
+        nodeExternals({
+          importType: 'commonjs',
+          additionalModuleDirs:
+            curEnvConfig.additionalModuleDirs || curWebpackConfig.additionalModuleDirs || [],
+          allowlist: allowList || []
+        })
+      ].concat(externals)
+    : externals;
+
   // 集成构建入口相关的配置（优先级更高）
   if (curEnvConfig.entry) {
     webpackConfig.entry = curEnvConfig.entry; // 会覆盖config.webpack.entry的配置
   }
   // 多页面多模板支持能力
   let entryConfig = webpackConfig.entry || {}; // 获取构建入口配置
-  const entryFiles = (entryConfig && Object.keys(entryConfig)) || [];
+  const entryFiles = Object.keys(entryConfig);
 
   if (
     !webpackConfig.entry ||

package/src/webpack/webpack.dev.conf.js

@@ -55,12 +55,24 @@ module.exports = (akfunConfig) => {
       emitOnErrors: true
       // minimize: false
     },
-    plugins: [
-      // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-      new webpack.HotModuleReplacementPlugin()
-    ]
+    plugins: []
   });
 
+  if (!curEnvConfig.closeHotReload) {
+    // 开启热更新能力
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    webpackDevConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
+
+    // 所有入口文件添加 热更新入口文件
+    if (webpackDevConfig.entry) {
+      const devClientPath = path.resolve(__dirname, '../dev-client'); // 从 akfun 中获取
+      // add hot-reload related code to entry chunks
+      Object.keys(webpackDevConfig.entry).forEach((name) => {
+        webpackDevConfig.entry[name] = [devClientPath].concat(webpackDevConfig.entry[name]);
+      });
+    }
+  }
+
   // 支持 cssExtract 配置
   if (curEnvConfig.cssExtract || curEnvConfig.cssExtract === undefined) {
     webpackDevConfig.plugins.push(
@@ -81,15 +93,6 @@ module.exports = (akfunConfig) => {
     });
   }
 
-  // 开启热更新能力
-  const devClientPath = path.resolve(__dirname, '../dev-client'); // 从akfun中获取
-  // add hot-reload related code to entry chunks
-  if (!curEnvConfig.closeHotReload && webpackDevConfig.entry) {
-    Object.keys(webpackDevConfig.entry).forEach((name) => {
-      webpackDevConfig.entry[name] = [devClientPath].concat(webpackDevConfig.entry[name]);
-    });
-  }
-
   // 判断当前环境是否有自定义plugins
   if (curEnvConfig.plugins && Array.isArray(curEnvConfig.plugins)) {
     // 添加自定义webpack插件