akfun 1.5.16 → 1.6.0

package/module/index.js

@@ -129,7 +129,7 @@ let argv = yargs
   )
   .command(
     'build',
-    '构建生产环境的代码',
+    '构建生产环境代码',
     (yargs) => {
       yargs
         .reset()
@@ -137,12 +137,12 @@ let argv = yargs
         .alias('h', 'help');
     },
     (argv) => {
-      mainAction.build();
+      mainAction.build('prod');
     },
   )
   .command(
     'build2lib',
-    '构建第三方功能包',
+    '构建lib库',
     (yargs) => {
       yargs
         .reset()
@@ -155,7 +155,7 @@ let argv = yargs
   )
   .command(
     'build2esm',
-    '构建esm功能包',
+    '构建esm模块',
     (yargs) => {
       yargs
         .reset()

package/module/inspect.js

@@ -4,7 +4,7 @@ const fs = require('fs');
 const getCurWebpackConfig = require('../src/utils/getCurWebpackConfig.js'); // 用于获取当前webpack配置的方法
 
 // 根据当前配置文件内容创建指定名称的文件
-const createConfigJs = function (fileCont, fileName) {
+const createConfigJs = function (fileName, fileCont) {
   let filePath = path.resolve(process.cwd(), fileName);
 
   fs.writeFile(filePath, JSON.stringify(fileCont, null, 2), (err) => {
@@ -21,18 +21,18 @@ module.exports = (type) => {
   const spinner = ora(  '[akfun]正在获取当前环境的配置数据...').start();
   if (type === 'dev') {
     const devConfig = getCurWebpackConfig(type);
-    createConfigJs(devConfig, 'current-akfun-dev-config.js');
+    createConfigJs('current-akfun-dev-config.js', devConfig);
     spinner.succeed(  '[akfun]当前配置数据已输出至akfun-dev-config.js中！');
   } else if (type === 'lib') {
     const libraryConfig = getCurWebpackConfig(type);
-    createConfigJs(libraryConfig, 'current-akfun-build2lib-config.js');
+    createConfigJs('current-akfun-build2lib-config.js', libraryConfig);
     spinner.succeed(  '[akfun]当前配置数据已输出至akfun-build2lib-config.js中！');
   } else if (type === 'build') {
     const prodConfig = getCurWebpackConfig(type);
     // 默认输出生产环境的配置文件
-    createConfigJs(prodConfig, 'current-akfun-build-config.js');
+    createConfigJs('current-akfun-build-config.js', prodConfig);
     spinner.succeed(  '[akfun]当前配置数据已输出至akfun-build-config.js中！');
   } else {
-    console.log(`不能识别type=${type}。`)
+    console.log(`不能识别type=${type}。`);
   }
 };

package/module/main.js

@@ -2,11 +2,24 @@
 const buildAction = require('../src/build.js'); // 构建脚本：生产环境
 const devAction = require('../src/dev-server.js'); // 构建脚本：开发环境
 const build2esm = require('../src/build2esm.js'); // 构建esm输出模块
+const inspect = require('./inspect.js');
+const gitClone = require('../src/utils/gitClone.js');
+const createFile = require('../src/utils/createFile');
+const {resolve} = require('../src/utils/pathUtils');
+const getConfigObj = require('../src/utils/getConfigObj');
+const deepMergeConfig = require('../src/utils/deepMergeConfig');
 const getCurWebpackConfig = require('../src/utils/getCurWebpackConfig.js'); // 用于获取当前webpack配置的方法
 
 module.exports = {
   dev: devAction,
   build: buildAction,
   build2esm,
+  inspect,
+  gitClone,
+  createFile,
+  resolve,
+  getConfigObj,
+  deepMergeConfig,
+  getCurWebpackConfig,
   curWebpackBaseConfPath: getCurWebpackConfig('base'),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "1.5.16",
+  "version": "1.6.0",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -73,7 +73,6 @@
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^3.9.0",
     "@typescript-eslint/parser": "^3.9.0",
-    "eslint-config-prettier": "^7.2.0",
     "@vue/compiler-sfc": "^3.0.0-rc.10",
     "@vue/eslint-config-typescript": "^5.0.2",
     "autoprefixer": "^9.8.0",
@@ -92,6 +91,7 @@
     "es6-promise-polyfill": "^1.2.0",
     "eslint": "^7.2.0",
     "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-import-resolver-webpack": "^0.12.1",
     "eslint-loader": "^4.0.2",
@@ -112,6 +112,7 @@
     "http-proxy-middleware": "^1.0.4",
     "inquirer": "^7.3.3",
     "mini-css-extract-plugin": "^0.9.0",
+    "monaco-editor-webpack-plugin": "6.0.0",
     "node-sass": "^4.14.1",
     "opn": "^6.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
@@ -152,8 +153,8 @@
     "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.2",
-    "yargs": "^12.0.2",
-    "webpack-node-externals": "^3.0.0"
+    "webpack-node-externals": "^3.0.0",
+    "yargs": "^12.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",

package/src/build.js

@@ -4,10 +4,15 @@ const path = require('path');
 const chalk = require('chalk');
 const webpack = require('webpack');
 const checkVersion = require('./check-versions');
-const config = require('./config/index'); // 引入当前项目配置文件
+const projectConfig = require('./config/index'); // 引入当前项目配置文件
+const deepMergeConfig = require('./utils/deepMergeConfig');
 
 // 构建脚本：一般用于构建生产环境的代码
-module.exports = function (BuildType) {
+module.exports = function (BuildType, akfunConfig) {
+  let config = projectConfig; // 默认使用执行命令目录下的配置数据
+  if (akfunConfig) {
+    config = deepMergeConfig(defaultConfig, akfunConfig);
+  }
   // 检查当前npm版本号是否匹配
   checkVersion();
   const spinner = ora('[akfun]开启AKFun构建能力...').start();
@@ -16,10 +21,10 @@ module.exports = function (BuildType) {
   // 根据BuildType判断是否引用专用于第三方功能包的webpack配置
   if (BuildType && BuildType === 'lib') {
     spinner.start('[akfun]开始构建第三方功能包...');
-    webpackConfig = require('./webpack/webpack.library.conf')();
+    webpackConfig = require('./webpack/webpack.library.conf')(config);
   } else {
     spinner.start('[akfun]开始构建生产环境的代码...');
-    webpackConfig = require('./webpack/webpack.prod.conf')();
+    webpackConfig = require('./webpack/webpack.prod.conf')(config);
   }
 
   /**

package/src/config/default.config.js

@@ -0,0 +1,101 @@
+// 统一路径解析：
+const { resolve } = require('../utils/pathUtils');
+
+/**
+ * akfun脚手架赋予当前项目的默认配置
+ */
+const defaultAKFunConfig = {
+  settings: {
+    enableESLint: false, // 是否开启ESLint，默认开启ESLint检测代码格式
+    enableESLintFix: false, // 是否ESLint自动修正代码格式
+    enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
+    enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
+  },
+  webpack: {
+    resolve: {
+      // webpack的resolve配置
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表
+      alias: {
+        '@': resolve('src'),
+        $components: resolve('src/components'),
+        $pages: resolve('src/pages'),
+        $plugins: resolve('src/plugins'),
+        $utils: resolve('src/utils')
+      }
+    },
+    createDeclaration: false, // 打包时是否创建ts声明文件
+    ignoreNodeModules: false, // 打包时是否忽略 node_modules
+    externals: [], // 从输出的 bundle 中排除依赖
+    sassResources: []
+  },
+  envParams: {
+    // 项目系统环境变量
+    common: {
+      // 通用参数
+      '#version#': '20200810.1'
+    },
+    local: {
+      // 本地开发环境
+      '#dataApiBase#': 'http://localhost:1024', // 数据接口根地址
+      '#assetsPublicPath#': 'http://localhost:1024', // 静态资源根地址
+      '#routeBasePath#': '/' // 路由根地址
+    },
+    online: {
+      // 线上正式环境配置参数
+      '#dataApiBase#': '/', // 数据接口根地址 "//xxx.cn/"格式
+      '#assetsPublicPath#': '', // 静态资源根地址 "//xxx.cn/_spa/projectName"格式
+      '#routeBasePath#': '/' // 路由根地址 "/_spa/projectName/"格式
+    }
+  },
+  dev: {
+    // 用于开启本地调试模式的相关配置信息
+    NODE_ENV: 'development',
+    port: 80,
+    autoOpenBrowser: true,
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '',
+    hostname: 'localhost',
+    proxyTable: {},
+    /** CSS Sourcemaps off by default because relative paths are "buggy"
+     * with this option, according to the CSS-Loader README
+     * (https://github.com/webpack/css-loader#sourcemaps)
+     * In our experience, they generally work as expected,
+     * just be aware of this issue when enabling this option.
+     */
+    cssSourceMap: false
+  },
+  build: {
+    // 用于构建生产环境代码的相关配置信息
+    NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务
+    assetsRoot: resolve('dist'), // 编译完成的文件存放路径
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '', // 资源引用二级路径
+    productionSourceMap: false,
+    // Gzip off by default as many popular public hosts such as
+    // Surge or Netlify already gzip all public assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css', 'json'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: false
+  },
+  build2lib: {
+    // 用于构建第三方功能包的配置文件
+    NODE_ENV: 'production',
+    libraryName: '', // 构建第三方功能包时最后导出的引用变量名
+    assetsRoot: resolve('dist'), // 编译完成的文件存放路径
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '', // 资源引用二级路径
+    productionSourceMap: false,
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css', 'json'],
+    bundleAnalyzerReport: false
+  }
+};
+
+// 备注：数组类型则直接覆盖
+module.exports = defaultAKFunConfig;

package/src/config/index.js

@@ -1,110 +1,15 @@
-'use strict';
-const deepMerge = require('deepmerge');
 // 统一路径解析：
 const { resolve } = require('../utils/pathUtils');
+const defaultAKFunConfig = require('./default.config');
 const getConfigObj = require('../utils/getConfigObj');
+const deepMergeConfig = require('../utils/deepMergeConfig');
 
 /** akfun脚手架赋予当前项目的默认配置
  * 备注：项目根目录的akfun.config.js的配置内容优先级高于defultAKFunConfig
  */
-const defaultAKFunConfig = {
-  settings: {
-    enableESLint: false, // 是否开启ESLint，默认开启ESLint检测代码格式
-    enableESLintFix: false, // 是否ESLint自动修正代码格式
-    enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
-    enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
-  },
-  webpack: {
-    resolve: {
-      // webpack的resolve配置
-      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表
-      alias: {
-        '@': resolve('src'),
-        $components: resolve('src/components'),
-        $pages: resolve('src/pages'),
-        $plugins: resolve('src/plugins'),
-        $utils: resolve('src/utils')
-      }
-    },
-    createDeclaration: false, // 打包时是否创建ts声明文件
-    ignoreNodeModules: false, // 打包时是否忽略 node_modules
-    externals: [], // 从输出的 bundle 中排除依赖
-    sassResources: []
-  },
-  envParams: {
-    // 项目系统环境变量
-    common: {
-      // 通用参数
-      '#version#': '20200810.1'
-    },
-    local: {
-      // 本地开发环境
-      '#dataApiBase#': 'http://localhost:1024', // 数据接口根地址
-      '#assetsPublicPath#': 'http://localhost:1024', // 静态资源根地址
-      '#routeBasePath#': '/' // 路由根地址
-    },
-    online: {
-      // 线上正式环境配置参数
-      '#dataApiBase#': '/', // 数据接口根地址 "//xxx.cn/"格式
-      '#assetsPublicPath#': '', // 静态资源根地址 "//xxx.cn/_spa/projectName"格式
-      '#routeBasePath#': '/' // 路由根地址 "/_spa/projectName/"格式
-    }
-  },
-  dev: {
-    // 用于开启本地调试模式的相关配置信息
-    NODE_ENV: 'development',
-    port: 80,
-    autoOpenBrowser: true,
-    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
-    assetsSubDirectory: '',
-    hostname: 'localhost',
-    proxyTable: {},
-    /** CSS Sourcemaps off by default because relative paths are "buggy"
-     * with this option, according to the CSS-Loader README
-     * (https://github.com/webpack/css-loader#sourcemaps)
-     * In our experience, they generally work as expected,
-     * just be aware of this issue when enabling this option.
-     */
-    cssSourceMap: false
-  },
-  build: {
-    // 用于构建生产环境代码的相关配置信息
-    NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务
-    assetsRoot: resolve('dist'), // 编译完成的文件存放路径
-    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
-    assetsSubDirectory: '', // 资源引用二级路径
-    productionSourceMap: false,
-    // Gzip off by default as many popular public hosts such as
-    // Surge or Netlify already gzip all public assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css', 'json'],
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: false
-  },
-  build2lib: {
-    // 用于构建第三方功能包的配置文件
-    NODE_ENV: 'production',
-    libraryName: '', // 构建第三方功能包时最后导出的引用变量名
-    assetsRoot: resolve('dist'), // 编译完成的文件存放路径
-    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
-    assetsSubDirectory: '', // 资源引用二级路径
-    productionSourceMap: false,
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css', 'json'],
-    bundleAnalyzerReport: false
-  }
-};
 
 // 从项目根目录获取当前项目的配置文件
 const curProjectConfig = getConfigObj(resolve('akfun.config.js'));
 
-// module.exports = Object.assign(defaultAKFunConfig, curProjectConfig);
-
-const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray;
 // 备注：数组类型则直接覆盖
-module.exports = deepMerge(defaultAKFunConfig, curProjectConfig, { arrayMerge: overwriteMerge });
+module.exports = deepMergeConfig(defaultAKFunConfig, curProjectConfig);

package/src/dev-server.js

@@ -7,11 +7,17 @@ const checkVersion = require('./check-versions');
 const { createProxyMiddleware } = require('http-proxy-middleware');
 const { resolve } = require('./utils/pathUtils');
 // 引入当前项目配置文件
-const config = require('./config/index');
+const projectConfig = require('./config/index');
+const defaultConfig = require('./config/default.config');
 const getDevWebpackConfig = require('./webpack/webpack.dev.conf');
+const deepMergeConfig = require('./utils/deepMergeConfig');
 
 // 构建脚本：一般用于构建开发环境的代码（包含热更新、接口代理等功能）
-module.exports = function () {
+module.exports = function (akfunConfig) {
+  let config = projectConfig; // 默认使用执行命令目录下的配置数据
+  if (akfunConfig) {
+    config = deepMergeConfig(defaultConfig, akfunConfig);
+  }
   // 检查当前npm版本号是否匹配
   checkVersion();
   const spinner = ora('[akfun]开启调试模式...').start();
@@ -35,7 +41,7 @@ module.exports = function () {
   // 使用 express 启动一个服务
   const app = express();
   // 获取开发环境的webpack基本配置
-  const webpackConfig = getDevWebpackConfig();
+  const webpackConfig = getDevWebpackConfig(config);
   const compiler = webpack(webpackConfig); // 启动 webpack 进行编译
 
   // 启动 webpack-dev-middleware，将编译后的文件暂存到内存中

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

@@ -22,7 +22,7 @@ module.exports = {
     },
     resolve: {
       // webpack的resolve配置
-      extensions: ['.js', '.jsx', '.vue', 'json'], // 用于配置webpack在尝试过程中用到的后缀列表
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', 'json'], // 用于配置webpack在尝试过程中用到的后缀列表
       alias: {
         '@': resolve('src'),
         $components: resolve('src/components'),
@@ -31,6 +31,8 @@ module.exports = {
         $utils: resolve('src/utils')
       }
     },
+    createDeclaration: false, // 打包时是否创建ts声明文件
+    ignoreNodeModules: false, // 打包时是否忽略 node_modules
     externals: [], // 从输出的 bundle 中排除依赖
     template: resolve('src/index.html'), // 默认使用的页面模板
     sassResources: []

package/src/utils/deepMergeConfig.js

@@ -0,0 +1,9 @@
+const deepMerge = require('deepmerge');
+
+const deepMergeConfig = function (defaultConfig, curConfig) {
+  const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray;
+  
+  return deepMerge(defaultConfig, curConfig, { arrayMerge: overwriteMerge });
+};
+
+module.exports = deepMergeConfig;

package/src/utils/getCurWebpackConfig.js

@@ -1,16 +1,16 @@
 /**
  * 用于获取当前项目配置文件
  */
-module.exports = (type) => {
+module.exports = (type, akfunConfig) => {
   let curConfig = {};
   if (type === 'dev') {
-    curConfig = require('../webpack/webpack.dev.conf')();
+    curConfig = require('../webpack/webpack.dev.conf')(akfunConfig);
   } else if (type === 'lib') {
-    curConfig = require('../webpack/webpack.library.conf')();
+    curConfig = require('../webpack/webpack.library.conf')(akfunConfig);
   } else if (type === 'build') {
-    curConfig = require('../webpack/webpack.prod.conf')();
+    curConfig = require('../webpack/webpack.prod.conf')(akfunConfig);
   } else if (type === 'base') {
-    curConfig = require('../webpack/webpack.base.conf')();
+    curConfig = require('../webpack/webpack.base.conf')(akfunConfig);
   }
   return curConfig;
 };

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

@@ -6,13 +6,14 @@ const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const utils = require('./loaderUtils');
 // 引入当前项目配置文件
-const config = require('../config/index');
+const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
 const getJsEntries = require('../utils/jsEntries');
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
 const { isArray } = require('../utils/typeof');
 
-module.exports = () => {
+module.exports = (akfunConfig) => {
+  let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
   const curEnvConfig = config.dev || {}; // 当前执行环境配置
   // 获取webpack基本配置
   const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig);

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

@@ -10,10 +10,11 @@ const nodeExternals = require('webpack-node-externals');
 
 const utils = require('./loaderUtils');
 // 引入当前项目配置文件
-const config = require('../config/index');
+const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
 
-module.exports = () => {
+module.exports = (akfunConfig) => {
+  let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
   const curEnvConfig = config.build2lib || {}; // 当前执行环境配置
   // 获取webpack基本配置
   const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig);
@@ -43,7 +44,9 @@ module.exports = () => {
         'process.env.NODE_ENV': JSON.stringify(curEnvConfig.NODE_ENV)
       }),
       new MiniCssExtractPlugin({
-        filename: utils.assetsPath('index.css'),
+        // filename: utils.assetsPath('index.css'),
+        filename: "[name].css",
+        chunkFilename: "[id].css",
         ignoreOrder: false
       }),
       new OptimizeCSSPlugin({

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

@@ -11,6 +11,7 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 const utils = require('./loaderUtils');
 const { resolve } = require('../utils/pathUtils'); // 统一路径解析
@@ -18,10 +19,11 @@ const getJsEntries = require('../utils/jsEntries');
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
 const { isArray } = require('../utils/typeof');
 // 引入当前项目配置文件
-const config = require('../config/index');
+const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
 
-module.exports = () => {
+module.exports = (akfunConfig) => {
+  let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
   const curEnvConfig = config.build || {}; // 当前执行环境配置
   // 获取webpack基本配置
   const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig);
@@ -175,6 +177,11 @@ module.exports = () => {
       })
     );
   }
+  
+  // 是否开启
+  if (curEnvConfig.openMonacoWebpackPlugin) {
+    webpackProdConfig.plugins.push(new MonacoWebpackPlugin());
+  }
 
   if (curEnvConfig.bundleAnalyzerReport) {
     webpackProdConfig.plugins.push(new BundleAnalyzerPlugin());