akfun 5.1.3 → 5.1.5

package/package.json

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

package/src/dev-server.js

@@ -21,28 +21,29 @@ module.exports = function (akfunConfig, _consoleTag) {
   const consoleTag = _consoleTag || curConsoleTag;
   let config = projectConfig; // 默认使用执行命令目录下的配置数据
   if (akfunConfig) {
-    // 参数中的config配置优先级最高
+    // 优先使用参数中的config配置
     config = deepMergeConfig(defaultConfig, akfunConfig);
   }
+  const curEnvConfig = config.dev;
   // 检查当前npm版本号是否匹配
   checkVersion();
   const spinner = ora(`${consoleTag}开启调试模式...`).start();
   /**
    * 如果 Node 的环境无法判断当前是 dev / product 环境
-   * 使用 config.dev.NODE_ENV 作为当前的环境
+   * 使用 curEnvConfig.NODE_ENV 作为当前的环境
    */
   if (!process.NODE_ENV) {
-    process.NODE_ENV = config.dev.NODE_ENV;
+    process.NODE_ENV = curEnvConfig.NODE_ENV;
     // 此时process.NODE_ENV = ‘development’;
   }
 
   // default port where dev server listens for incoming traffic
-  // 如果没有指定运行端口，使用 config.dev.port 作为运行端口
-  const port = process.env.PORT || config.dev.port;
+  // 如果没有指定运行端口，使用 curEnvConfig.port 作为运行端口
+  const port = process.env.PORT || curEnvConfig.port;
 
   // automatically open browser, if not set will be false
   // 是否自动打开浏览器
-  const autoOpenBrowser = !!config.dev.autoOpenBrowser;
+  const autoOpenBrowser = !!curEnvConfig.autoOpenBrowser;
 
   // 使用 express 启动一个服务
   const app = express();
@@ -52,9 +53,9 @@ module.exports = function (akfunConfig, _consoleTag) {
 
   // Define HTTP proxies to your custom API backend
   // https://github.com/chimurai/http-proxy-middleware
-  // 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置
+  // 使用 curEnvConfig.proxyTable 的配置作为 proxyTable 的代理配置
   // 备注：需放connect-history-api-fallback前面，避免get请求的代理失效
-  const proxyTable = config.dev.proxyTable;
+  const proxyTable = curEnvConfig.proxyTable;
   if (proxyTable && JSON.stringify(proxyTable) !== '{}') {
     // 将 proxyTable 中的请求配置挂在到启动的 express 服务上
     // proxy api requests
@@ -74,7 +75,10 @@ module.exports = function (akfunConfig, _consoleTag) {
 
   // serve pure public assets
   // 拼接 public 文件夹的静态资源路径
-  const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory);
+  const staticPath = path.posix.join(
+    curEnvConfig.assetsPublicPath,
+    curEnvConfig.assetsSubDirectory
+  );
   app.use(staticPath, express.static(resolve('public')));
 
   const compiler = webpack(webpackConfig); // 启动 webpack 进行编译
@@ -104,8 +108,8 @@ module.exports = function (akfunConfig, _consoleTag) {
     process.env.PORT = port;
 
     const uri = isHttps
-      ? `https://${config.dev.hostname}`
-      : `http://${config.dev.hostname}:${port}`;
+      ? `https://${curEnvConfig.hostname}`
+      : `http://${curEnvConfig.hostname}:${port}`;
 
     console.log(`> Listening at ${uri}\n`);
 
@@ -117,17 +121,23 @@ module.exports = function (akfunConfig, _consoleTag) {
     if (entryFiles.length > 0) {
       // 获取第一个入口文件
       const filename = entryFiles[0];
-      console.info(
-        `当前运行脚本:\n ${projPath}${filename}.js\n当前运行样式[可能不存在]:\n${projPath}${filename}.css`
-      );
+      const consoleInfo = curEnvConfig.consoleInfo || '当前运行脚本';
+
+      if (curEnvConfig.cssExtract || curEnvConfig.cssExtract === undefined) {
+        console.info(
+          `${consoleInfo}:\n ${projPath}${filename}.js\n当前可用样式[可能不存在]:\n${projPath}${filename}.css`
+        );
+      } else {
+        console.info(`${consoleInfo}:\n ${projPath}${filename}.js`);
+      }
       // 是否自动打开浏览器并跳转到第一个入口页面
-      if (!config.dev.closeHtmlWebpackPlugin && autoOpenBrowser) {
+      if (!curEnvConfig.closeHtmlWebpackPlugin && autoOpenBrowser) {
         open(`${projPath}${filename}.html`, { wait: true });
       }
     }
   };
 
-  if (config.dev.https) {
+  if (curEnvConfig.https) {
     const sslOptions = {
       key: fs.readFileSync(path.resolve(__dirname, './ssl/localhost.key')),
       cert: fs.readFileSync(path.resolve(__dirname, './ssl/localhost.cert')),

package/src/webpack/loaderUtils.js

@@ -71,15 +71,19 @@ exports.cssLoaders = function (options) {
     let loaders = [];
     // 生产环境使用MiniCssExtractPlugin提取css内容，用于提取css内容到一个独立的文件中
     if (options.environment === 'prod') {
-      // MiniCssExtractPlugin.loader需要配合MiniCssExtractPlugin使用
+      const curEnvConfig = options.envConfig || {};
+      const cssExtract = curEnvConfig.cssExtract || curEnvConfig.cssExtract === undefined;
+      // MiniCssExtractPlugin.loader 需要配合 MiniCssExtractPlugin 使用
       loaders = [
         VueCssLoader,
-        {
-          loader: MiniCssExtractPlugin.loader,
-          options: {
-            esModule: false // enable a CommonJS syntax using
-          }
-        },
+        cssExtract
+          ? {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                esModule: false // enable a CommonJS syntax using
+              }
+            }
+          : undefined,
         cssLoader,
         postCssLoader
       ];

package/src/webpack/vue-loader.conf.js

@@ -3,21 +3,24 @@ const utils = require('./loaderUtils');
 const config = require('../config/index');
 const isProduction = process.NODE_ENV === 'production';
 
-module.exports = {
-  loaders: utils.cssLoaders({
-    cssLoaderUrl: config.webpack.cssLoaderUrl, // 用于自定义css-loader配置项[url]
-    cssLoaderUrlDir: config.webpack.cssLoaderUrlDir, // 用于设置css-loader配置项[url]的生效目录
-    cssLoaderOption: config.webpack.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
-    sassOptions: config.webpack.sassOptions, // 用于设置sass-loader配置项
-    sourceMap: isProduction // 生产环境sourceMap是true
-      ? config.build.productionSourceMap
-      : config.dev.cssSourceMap,
-    environment: isProduction ? 'prod' : 'dev' // 生产环境下：将相关的样式内容提取出来合并到一个文件中
-  }),
-  transformToRequire: {
-    video: 'src',
-    source: 'src',
-    img: 'src',
-    image: 'xlink:href'
-  }
+module.exports = (curEnvConfig) => {
+  return {
+    loaders: utils.cssLoaders({
+      envConfig: curEnvConfig, // 当前环境变量
+      cssLoaderUrl: config.webpack.cssLoaderUrl, // 用于自定义css-loader配置项[url]
+      cssLoaderUrlDir: config.webpack.cssLoaderUrlDir, // 用于设置css-loader配置项[url]的生效目录
+      cssLoaderOption: config.webpack.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
+      sassOptions: config.webpack.sassOptions, // 用于设置sass-loader配置项
+      sourceMap: isProduction // 生产环境sourceMap是true
+        ? config.build.productionSourceMap
+        : config.dev.cssSourceMap,
+      environment: isProduction ? 'prod' : 'dev' // 生产环境下：将相关的样式内容提取出来合并到一个文件中
+    }),
+    transformToRequire: {
+      video: 'src',
+      source: 'src',
+      img: 'src',
+      image: 'xlink:href'
+    }
+  };
 };

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

@@ -35,6 +35,7 @@ const BannerPack = new webpack.BannerPlugin({
 module.exports = (_curEnvConfig, _akfunConfig) => {
   const curEnvConfig = _curEnvConfig || {}; // 用于接收当前运行环境配置变量
   let config = _akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
+  // 获取当前项目配置文件中的webpack配置
   const curWebpackConfig = config.webpack;
   // 获取当前项目目录
   const curProjectDir = getProjectDir(curWebpackConfig.projectDir);
@@ -75,12 +76,12 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
     resolve: curWebpackConfig.resolve,
     externals: curWebpackConfig.ignoreNodeModules
       ? [
-        nodeExternals({
-          importType: 'commonjs',
-          additionalModuleDirs: curWebpackConfig.additionalModuleDirs || [],
-          allowlist: curWebpackConfig.allowList ? curWebpackConfig.allowList : []
-        })
-      ].concat(curWebpackConfig.externals)
+          nodeExternals({
+            importType: 'commonjs',
+            additionalModuleDirs: curWebpackConfig.additionalModuleDirs || [],
+            allowlist: curWebpackConfig.allowList ? curWebpackConfig.allowList : []
+          })
+        ].concat(curWebpackConfig.externals)
       : curWebpackConfig.externals,
     module: {
       rules: [
@@ -89,7 +90,7 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
           use: [
             {
               loader: 'vue-loader',
-              options: vueLoaderConfig // 配置vue-loader相关的loader插件
+              options: vueLoaderConfig(curEnvConfig) // 配置vue-loader相关的loader插件
             }
           ]
         },
@@ -130,7 +131,7 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
           // 图片资源
           /*
             url-loader 功能类似于 file-loader，在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
-           */
+          */
           test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
           type: 'asset',
           issuer: /\.s?css$/,
@@ -213,12 +214,13 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
     const externals = curEnvConfig.externals || curWebpackConfig.external || [];
     webpackConfig.externals = curEnvConfig.ignoreNodeModules
       ? [
-        nodeExternals({
-          importType: 'commonjs',
-          additionalModuleDirs: curEnvConfig.additionalModuleDirs || curWebpackConfig.additionalModuleDirs || [],
-          allowlist: allowList || []
-        })
-      ].concat(externals)
+          nodeExternals({
+            importType: 'commonjs',
+            additionalModuleDirs:
+              curEnvConfig.additionalModuleDirs || curWebpackConfig.additionalModuleDirs || [],
+            allowlist: allowList || []
+          })
+        ].concat(externals)
       : externals;
   }
   // 集成构建入口相关的配置（优先级更高）

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

@@ -2,9 +2,9 @@ const webpack = require('webpack');
 const path = require('path');
 const { merge } = require('webpack-merge');
 const utils = require('./loaderUtils');
+const getBaseWebpackConfig = require('./webpack.base.conf'); // 获取webpack基本配置
 // 引入当前项目配置文件
 const projectConfig = require('../config/index');
-const getBaseWebpackConfig = require('./webpack.base.conf');
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 // const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
@@ -39,6 +39,7 @@ module.exports = (akfunConfig) => {
     },
     module: {
       rules: utils.styleLoaders({
+        envConfig: curEnvConfig, // 当前环境变量
         sourceMap: curEnvConfig.cssSourceMap,
         environment: 'prod', // 'dev': 不会将css单独提取出来
         cssLoaderUrl: config.webpack.cssLoaderUrl,
@@ -56,15 +57,21 @@ module.exports = (akfunConfig) => {
     },
     plugins: [
       // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-      new webpack.HotModuleReplacementPlugin(),
+      new webpack.HotModuleReplacementPlugin()
+    ]
+  });
+
+  // 支持 cssExtract 配置
+  if (curEnvConfig.cssExtract || curEnvConfig.cssExtract === undefined) {
+    webpackDevConfig.plugins.push(
       new MiniCssExtractPlugin({
         // filename: utils.assetsPath('index.css'),
         filename: '[name].css',
         chunkFilename: '[name].css',
         ignoreOrder: false
       })
-    ]
-  });
+    );
+  }
 
   if (!webpackDevConfig.closeHtmlWebpackPlugin) {
     // 使用用户自定义的多入口配置，生产对应的多页面多模板（优先使用用户的自定义页面模板）

package/src/webpack/webpack.library.conf.js

@@ -10,6 +10,11 @@ const utils = require('./loaderUtils');
 const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
 
+/**
+ * 第三方库 webpack 配置，用于构建第三方库（仅构建可用的 umd 模块，其构建产物不会注入到 html 中）
+ * @param {*} akfunConfig 当前项目配置
+ * @returns
+ */
 module.exports = (akfunConfig) => {
   let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
   const curEnvConfig = config.build2lib || {}; // 当前执行环境配置
@@ -29,7 +34,7 @@ module.exports = (akfunConfig) => {
       filename: '[name].umd.js',
       publicPath: '',
       library: {
-        type: 'umd', // 定义打包方式Universal Module Definition,同时支持在CommonJS、AMD和全局变量使用
+        type: 'umd', // 定义打包方式Universal Module Definition，同时支持在CommonJS、AMD和全局变量使用
         name: curEnvConfig.libraryName || '[name]'
       },
       // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
@@ -37,6 +42,7 @@ module.exports = (akfunConfig) => {
     },
     module: {
       rules: utils.styleLoaders({
+        envConfig: curEnvConfig, // 当前环境变量
         sourceMap: curEnvConfig.productionSourceMap,
         environment: 'prod',
         cssLoaderUrl: config.webpack.cssLoaderUrl,
@@ -60,14 +66,7 @@ module.exports = (akfunConfig) => {
         new CssMinimizerPlugin()
       ]
     },
-    plugins: [
-      new MiniCssExtractPlugin({
-        // filename: utils.assetsPath('index.css'),
-        filename: '[name].css',
-        chunkFilename: '[name].css',
-        ignoreOrder: false
-      })
-    ]
+    plugins: []
   });
 
   // 优先使用当前环境配置中的output
@@ -88,6 +87,18 @@ module.exports = (akfunConfig) => {
     );
   }
 
+  // 支持 cssExtract 配置
+  if (curEnvConfig.cssExtract || curEnvConfig.cssExtract === undefined) {
+    webpackLibConfig.plugins.push(
+      new MiniCssExtractPlugin({
+        // filename: utils.assetsPath('index.css'),
+        filename: '[name].css',
+        chunkFilename: '[name].css',
+        ignoreOrder: false
+      })
+    );
+  }
+
   // 判断当前环境是否有自定义plugins
   if (curEnvConfig.plugins && Array.isArray(curEnvConfig.plugins)) {
     // 添加自定义webpack插件

package/src/webpack/webpack.prod.conf.js

@@ -15,6 +15,11 @@ const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
 const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
 
+/**
+ * 生产环境 webpack 配置，用于构建生产环境可运行的代码（构建后的脚本会注入到 html 中）
+ * @param {*} akfunConfig 当前项目配置
+ * @returns
+ */
 module.exports = (akfunConfig) => {
   let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
   const curEnvConfig = config.build || {}; // 当前执行环境配置
@@ -50,6 +55,7 @@ module.exports = (akfunConfig) => {
     },
     module: {
       rules: utils.styleLoaders({
+        envConfig: curEnvConfig, // 当前环境变量
         sourceMap: curEnvConfig.productionSourceMap,
         environment: 'prod',
         cssLoaderUrl: config.webpack.cssLoaderUrl,
@@ -87,22 +93,7 @@ module.exports = (akfunConfig) => {
         new CssMinimizerPlugin()
       ]
     },
-    plugins: [
-      new MiniCssExtractPlugin({
-        filename: utils.assetsPath('css/[name].[contenthash:8].css'),
-        ignoreOrder: false // Enable to remove warnings about conflicting order
-      })
-      // Compress extracted CSS. We are using this plugin so that possible
-      // duplicated CSS from different components can be deduped.
-      /**
-       * 该插件可以接收以下选项（它们都是可选的）：
-       * assetNameRegExp：表示应优化的资产的名称的正则表达式\最小化，默认为 /\.css$/g
-       * cssProcessor：用于优化\最小化CSS的CSS处理器，默认为cssnano。
-       * 这应该是cssnano.process接口之后的一个函数（接收一个CSS和options参数并返回一个Promise）。
-       * cssProcessorOptions：传递给cssProcessor的选项，默认为 {}
-       * canPrint：一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true
-       */
-    ]
+    plugins: []
   });
 
   // 使用用户自定义的多入口配置，生产对应的多页面多模板
@@ -140,6 +131,26 @@ module.exports = (akfunConfig) => {
     );
   }
 
+  // 支持 cssExtract 配置
+  if (curEnvConfig.cssExtract || curEnvConfig.cssExtract === undefined) {
+    webpackProdConfig.plugins.push(
+      new MiniCssExtractPlugin({
+        filename: utils.assetsPath('css/[name].[contenthash:8].css'),
+        ignoreOrder: false // Enable to remove warnings about conflicting order
+      })
+    );
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    /**
+     * MiniCssExtractPlugin 插件可以接收以下选项（它们都是可选的）：
+     * assetNameRegExp：表示应优化的资产的名称的正则表达式\最小化，默认为 /\.css$/g
+     * cssProcessor：用于优化\最小化CSS的CSS处理器，默认为cssnano。
+     * 这应该是cssnano.process接口之后的一个函数（接收一个CSS和options参数并返回一个Promise）。
+     * cssProcessorOptions：传递给cssProcessor的选项，默认为 {}
+     * canPrint：一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true
+     */
+  }
+
   // 判断当前环境是否有自定义plugins
   if (curEnvConfig.plugins && Array.isArray(curEnvConfig.plugins)) {
     // 添加自定义webpack插件