jjb-cmd 1.0.14 → 1.0.15

package/bin/command.js

@@ -5,11 +5,11 @@ const cliScripts = require('../src/cli.pull.js');
 const cliScripts2 = require('../src/cli.pull2.js');
 const cliScripts3 = require('../src/cli.install/index.js');
 const cliScripts4 = require('../src/cli.rm-rf.js');
+const cliScripts6 = require('../src/cli.init');
 const MergeScripts = require('../src/cli.merge.js');
 
 commander.command('v').description('-- 查看版本').action(() => {
-  const package = JSON.parse(fs.readFileSync(path.resolve('./package.json'), 'utf-8').toString());
-  console.log(`当前版本 ${package.version}`)
+  console.log('当前版本 v1.0.12');
 });
 
 commander.command('help').description('-- 帮助').action(() => {
@@ -36,6 +36,11 @@ commander.command('pull2 -- <文件夹名称必填。>').description('-- 文件
   cliScripts2(res);
 });
 
+// pull 命令
+commander.command('init').description('-- 初始化项目').action(res => {
+  cliScripts6(res);
+});
+
 // rm-rf 命令
 commander.command('rm-rf').description('-- 删除全部').action(res => {
   cliScripts4(res);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jjb-cmd",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "jjb脚手架工具",
   "main": "index.js",
   "scripts": {

package/src/cli.dva.register.saas.txt

@@ -1,7 +1,13 @@
+/**
+ * @author XiWell
+ * @version 2.0.1
+ * @description 基于QianKun框架的APP注册文件,请勿修改!
+ */
+
+import 'moment/locale/zh-cn';
 import dva from 'dva';
-import ReactDOM from 'react-dom';
 import { createBrowserHistory } from 'history';
-import 'antd/dist/antd.less';
+import { unmountComponentAtNode } from 'react-dom';
 
 /**
  * @description 注册app
@@ -9,31 +15,30 @@ import 'antd/dist/antd.less';
  * @returns {{unmount: Function, mount: Function, bootstrap: Function}}
  */
 export const registerApplication = (selector = '#root') => {
-  const createHistory = createBrowserHistory();
+  try {
+    const app = dva({ history: createBrowserHistory() });
+    require('./models').automaticModels(app);
+    app.router(config => require('./router').AutomaticRouter(config));
 
-  const app = dva({ history: createHistory });
-  require('./models').automaticModels(app);
+    const render = () => app.start(selector);
+    if (!window.__POWERED_BY_QIANKUN__) render();
 
-  app.router(config => require('./router').AutomaticRouter({
-    ...config,
-    basename: process.env.app.basename
-  }));
-
-  const render = () => app.start(selector);
-
-  if (!window.__POWERED_BY_QIANKUN__) {
-    render();
+    return {
+      mount: () => render(),
+      unmount: props => {
+        if (window.__POWERED_BY_QIANKUN__) {
+          const { container } = props;
+          const element = container
+            ? container.querySelector(selector)
+            : document.querySelector(selector);
+          unmountComponentAtNode(element);
+        } else {
+          console.error('卸载APP失败，原因：', '当前环境非QianKun');
+        }
+      },
+      bootstrap: props => props
+    };
+  } catch (e) {
+    console.error('注册APP失败，原因:', e.message);
   }
-
-  return {
-    mount: () => render(),
-    unmount: props => {
-      const { container } = props;
-      const element = container
-        ? container.querySelector('#root')
-        : document.querySelector('#root');
-      ReactDOM.unmountComponentAtNode(element);
-    },
-    bootstrap: props => props
-  };
 };

package/src/cli.dva.register.spa.txt

@@ -1,3 +1,9 @@
+/**
+ * @author XiWell
+ * @version 1.0.1
+ * @description 基于QianKun框架的APP注册文件,请勿修改!
+ */
+
 import dva from 'dva';
 import ReactDOM from 'react-dom';
 import { createBrowserHistory } from 'history';

package/src/cli.dva.router.saas.txt

@@ -1,100 +1,177 @@
+/**
+ * @author XiWell
+ * @version 2.0.1
+ * @description 此文件为dva/router自动化文件,无需配置路由,请勿修改!
+ */
+
 import React from 'react';
-import { ConfigProvider, Result } from 'antd';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { ConfigProvider } from 'antd';
+import { Route, Router, Switch } from 'dva/router';
 
 /**
- * @description react路由扫描器
- * @param props {{app: object}}
+ * @description 是否匹配页面
+ * @param name {string}
+ * @return {{stat: boolean, param: null}}
  */
-function ReactRouterScanner (props) {
-  const paths = require.context('~/pages', true, /\.(jsx|js)$/).keys();
-  const symbolByEntry = 'Entry_index.js';
-  const symbolByContainer = 'Container_index.js';
+function isParamPage (name) {
+  const result = {
+    stat: false,
+    param: null
+  };
+  if (/^_/.test(name)) {
+    const match = name.replace(/\.js$/, '').split(/_/).filter(item => !!item && item !== 'index');
+    result.stat = match.length !== 0;
+    result.param = match.join('_');
+  }
+  return result;
+}
+
+/**
+ * @description 首字母转小写
+ * @param value {string}
+ * @return {string}
+ */
+function toLowerCase (value) {
+  return `${value[ 0 ].toLowerCase()}${value.substring(1)}`;
+}
 
-  /**
-   * @description 路由处理
-   * @param path {string}
-   * @return string
-   */
-  function routeHandle (path) {
-    return `/${path.replace(/\/index.js$/, '').split(/\//).map(a => {
-      a = a.replace(a[ 0 ], a[ 0 ].toLowerCase());
-      return a;
-    }).map(a => {
-      if (/^[a-zA-Z]+_[a-zA-Z]+$/.test(a)) {
-        return `:${a.split(/_/).join('')}`;
+/**
+ * @description 获取初始路由集合
+ * @return {{path: string, file: string}[]}
+ */
+function getRoutes () {
+  const routes = [];
+  const fileList = require.context('~/pages', true, /\.js$/).keys();
+  for (let i = 0; i < fileList.length; i++) {
+    const route = {};
+    const file = fileList[ i ];
+    const fileSplit = file.split(/\//);
+    const fileName = fileSplit[ fileSplit.length - 1 ];
+    const {
+      stat: fileState,
+      param: fileParam
+    } = isParamPage(fileName);
+    const filePathArray = fileSplit.slice(1, fileSplit.length - 1).map(item => {
+      const {
+        stat,
+        param
+      } = isParamPage(item);
+      return stat
+        ? `:${param}`
+        : item;
+    });
+    if (fileState || fileName === 'index.js') {
+      if (filePathArray.length) {
+        const path = filePathArray.map(item => toLowerCase(item)).join('/');
+        route.path = (`/${path}${fileState
+          ? `/:${fileParam}`
+          : ''}`);
+      } else {
+        route.path = `/${fileState
+          ? `:${fileParam}`
+          : ''}`;
       }
-      return a;
-    }).join('/')}`;
+      route.file = file;
+      routes.push(route);
+    }
   }
+  return routes.reverse();
+}
 
-  const routerMap = paths.map(path => {
-    const pure = path.replace(/^\.\//, '');
-    return {
-      path: pure === 'index.js'
-        ? '/'
-        : pure === symbolByContainer
-          ? '/container'
-          : path === symbolByEntry
-            ? '/entry'
-            : routeHandle(pure),
-      suffix: 'index.js',
-      component: require(`~/pages/${pure}`).default,
-      componentName: pure.replace(/\//g, '_')
-    };
-  });
+/**
+ * @typedef {object} TreeRoutes
+ * @property {string} path
+ * @property {string} file
+ * @property {TreeRoutes[]} children
+ */
 
-  const Main = routerMap.find(item => item.componentName === 'index.js');
-  const Entry = routerMap.find(item => item.componentName === symbolByEntry);
-  const Container = routerMap.find(item => item.componentName === symbolByContainer);
-  const ChildrenRoute = routerMap.filter(item => item.componentName.match(new RegExp('Container_')) && item.path !== '/container');
-  const ContainerComponent = Container
-    ? Container.component
-    : null;
+/**
+ * @description 优化tree
+ * @param tree {TreeRoutes[]}
+ * @return {TreeRoutes[]}
+ */
+function optimizationTree (tree = []) {
+  function deep (array = []) {
+    const inner = [];
+    for (let i = 0; i < array.length; i++) {
+      const item = array[ i ];
+      const newItem = {};
+      newItem.children = item.children.length
+        ? deep(item.children)
+        : [];
+      newItem.path = item.path;
+      newItem.Component = require(`~/pages${item.file.replace(/^\./, '')}`).default;
+      inner.push(newItem);
+    }
+    return inner;
+  }
+
+  return deep(tree);
+}
+
+/**
+ * @description 将初始routes转换为tree结构
+ * @param routes {{path: string, file: string}[]}
+ * @return {TreeRoutes[]}
+ */
+function treeRoutes (routes = []) {
+  const dataSource = [];
+  const indexItem = routes.find(item => item.path === '/');
+  for (let i = 0; i < routes.length; i++) {
+    const route = routes[ i ];
+    if (route.path === '/') {
+      continue;
+    }
+    const pathArray = route.path.split('/').slice(1);
+    route.parentFile = pathArray.length === 1
+      ? null
+      : routes[ i - 1 ].file;
+    dataSource.push(route);
+  }
+  if (indexItem) {
+    Object.assign(indexItem, { parentFile: null });
+    dataSource.push(indexItem);
+  }
+  let len;
+  for (let i = 0; len = dataSource.length, i < len; i++) {
+    const arrTemp = [];
+    for (let j = 0; j < dataSource.length; j++) {
+      if (dataSource[ i ].file === dataSource[ j ].parentFile) {
+        dataSource[ i ].children = arrTemp;
+        arrTemp.push(dataSource[ j ]);
+      } else {
+        dataSource[ i ].children = arrTemp;
+      }
+    }
+  }
+  const result = [];
+  for (let i = 0; i < dataSource.length; i++) {
+    if (dataSource[ i ].parentFile === null) {
+      result.push(dataSource[ i ]);
+    }
+  }
+  return optimizationTree(result);
+}
+
+function RenderRouter (routes = [], inProps = {}) {
   return (
-    <Router
-      basename={window.__POWERED_BY_QIANKUN__
-        ? props.basename
-        : '/'}
-    >
+    <Router history={inProps.history}>
       <Switch>
-        {Main && (
-          <Route
-            exact
-            path={Main.path}
-            component={Main.component}
-          />
-        )}
-        {Entry && (
-          <Route
-            exact
-            path={Entry.path}
-            component={Entry.component}
-          />
-        )}
-        {Container && (
+        {routes.map(({
+          path,
+          children,
+          Component
+        }, index) => (
           <Route
-            path={Container.path}
-            render={$props => (
-              <ContainerComponent {...$props}>
-                <Switch>
-                  {ChildrenRoute.map((route, key) => (
-                    <Route
-                      exact
-                      key={key}
-                      path={route.path}
-                      component={route.component}
-                    />
-                  ))}
-                </Switch>
-              </ContainerComponent>
+            key={index}
+            path={`${(process.env.app || {}).basename || ''}${path}`}
+            render={props => (
+              <Component {...props}>
+                {RenderRouter(children, inProps)}
+              </Component>
             )}
           />
-        )}
-        <Route
-          path="*"
-          component={() => <Result title="非常抱歉您访问的地址暂时无法显示，请确认后再试！" />}
-        />
+        ))}
       </Switch>
     </Router>
   );
@@ -103,22 +180,19 @@ function ReactRouterScanner (props) {
 /**
  * @description 自动化路由组件
  * @param app {object}
- * @param basename {string}
+ * @param history {history}
  * @return {JSX.Element}
  */
 export const AutomaticRouter = ({
   app,
-  basename
+  history
 }) => {
   return (
-    <ConfigProvider
-      locale={require('antd/lib/locale/zh_CN').default}
-      prefixCls={require('../../../../package.json').antPrefix || 'ant'}
-    >
-      <ReactRouterScanner
-        app={app}
-        basename={basename}
-      />
+    <ConfigProvider locale={require('antd/lib/locale/zh_CN').default}>
+      {RenderRouter(treeRoutes(getRoutes()), {
+        app,
+        history
+      })}
     </ConfigProvider>
   );
 };

package/src/cli.dva.router.spa.txt

@@ -1,3 +1,9 @@
+/**
+ * @author XiWell
+ * @version 1.0.1
+ * @description 此文件为dva/router自动化文件,无需配置路由,请勿修改!
+ */
+
 import React from 'react';
 import { ConfigProvider } from 'antd';
 import { Route, Router, Switch } from 'dva/router';

package/src/cli.init/jjb.config.json

@@ -0,0 +1,37 @@
+{
+  "projectType": "micro-spa",
+  "installTarget": "node_modules",
+  "installResources": [
+    "common",
+    "react-admin-component"
+  ],
+  "environment": {
+    "development": {
+      "API_HOSE": ""
+    },
+    "test": {
+      "API_HOSE": ""
+    },
+    "release": {
+      "API_HOSE": ""
+    },
+    "production": {
+      "API_HOSE": ""
+    }
+  },
+  "contextInject": {},
+  "windowInject": {
+    "title": "JJB Micro APP"
+  },
+  "server": {
+    "port": "8088",
+    "host": "127.0.0.1"
+  },
+  "framework": {
+    "antd": {
+      "link-color": "red",
+      "primary-color": "red",
+      "border-radius-base": "2px"
+    }
+  }
+}

package/src/cli.init/jjb.script/build.js

@@ -0,0 +1,11 @@
+const { hasEnvironment } = require('./utils');
+
+if (!hasEnvironment()) {
+  throw Error('jjb.script[build]: 启动build需要提供NODE_ENV变量，请确认你所运行的脚本是否正确？');
+}
+
+require('webpack')(require('./config')('production').webpack).run(err => {
+  if (!err) {
+    console.log('项目打包完成！');
+  }
+});

package/src/cli.init/jjb.script/config.js

@@ -0,0 +1,214 @@
+// noinspection JSUnresolvedVariable
+
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TerserWebpackPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
+const { requireResolve } = require('./utils');
+const webpack = require('webpack');
+
+const config = require(requireResolve('jjb.config.json'));
+const packageJSON = require(requireResolve('package.json'));
+const server = (config.server || {});
+const environment = (config.environment || {})[ process.env.NODE_ENV ];
+const windowInject = (config.windowInject || {});
+const contextInject = (config.contextInject || {});
+const contextData = {
+  ...environment,
+  ...contextInject
+};
+
+module.exports = mode => {
+  const isProduction = mode === 'production';
+  return {
+    server,
+    webpack: {
+      // 模式 ‘development’ | ‘production’
+      mode,
+      // 入口
+      entry: './src/index.js',
+      // 输出
+      output: {
+        // 指定输出目录文件名
+        path: path.resolve(__dirname, '../dist'),
+        // 定义全局变量,暴露到‘window’对象中
+        library: packageJSON.name,
+        // 指定编译的‘js’存放目录文件名称
+        filename: 'static/js/[id].js',
+        // 输出公共路径
+        publicPath: '/'
+      },
+      // ‘node.module’
+      module: {
+        // 文件处理
+        rules: [
+          {
+            // 处理‘less’和‘css’文件
+            test: /\.(less|css)$/,
+            // 以此从下到上处理‘css’
+            use: [
+              // 3:由‘webpack.MiniCssExtractPlugin.loader’做收尾工作
+              // 主要分离css文件
+              {
+                loader: MiniCssExtractPlugin.loader
+              },
+              // 2:将被‘less-loader’处理的‘css’
+              // 由‘css-loader’再次处理
+              {
+                loader: 'css-loader'
+              },
+              // 1:处理‘less’文件
+              {
+                // 使用‘less-loader’
+                loader: 'less-loader',
+                // 配置‘less-loader’
+                options: {
+                  // ‘less-loader’特殊配置
+                  lessOptions: {
+                    // 定义‘less’全局变量,从jjb.config.antd获取
+                    modifyVars: (config.framework || {}).antd || {},
+                    // 启用‘less-javascript’功能
+                    javascriptEnabled: true
+                  }
+                }
+              }
+            ]
+          },
+          {
+            // 处理‘js’文件
+            test: /\.js$/,
+            // 使用‘babel-loader’
+            loader: 'babel-loader',
+            // 允许‘babel-loader’操作目录
+            include: [
+              // 整个‘src’目录
+              path.resolve(__dirname, '../src'),
+              // ‘jjb-common’库
+              path.resolve(__dirname, '../node_modules/jjb-common'),
+              // ‘jjb-react-admin-component’库
+              path.resolve(__dirname, '../node_modules/jjb-react-admin-component')
+            ],
+            // 配置‘babel-loader’
+            options: {
+              // 加入一个‘babel-plugin-import’插件,特殊处理‘antd’文件过大问题
+              plugins: [
+                [
+                  'import',
+                  {
+                    // ‘webpack’定义全局变量‘antd’
+                    libraryName: 'antd',
+                    // 按需将‘es’文件夹中组件导出,绑定到‘antd’变量
+                    // 除了‘es’,也可以修改为‘lib’
+                    libraryDirectory: 'es',
+                    // 这里设为‘true’,表示自动导入‘antd/dist/less’
+                    // 或修改为‘css’ | ‘less’
+                    style: true
+                  }
+                ],
+                [
+                  '@babel/plugin-proposal-decorators',
+                  {
+                    'legacy': true
+                  }
+                ]
+              ],
+              // 考虑到使用‘React JSX’语法‘babel-loader’的编译预设要改为‘preset-react’
+              // 可选值‘preset-env’
+              presets: [ '@babel/preset-react' ]
+            }
+          },
+          {
+            // 处理‘svg’文件
+            test: /\.svg/,
+            // 使用‘file-loader’
+            loader: 'file-loader',
+            // 配置‘file-loader’
+            options: {
+              // 指定存储目录
+              outputPath: 'media/svg'
+            }
+          },
+          {
+            // 处理图片文件
+            test: /\.(png|jpg|jpeg|gif|ico|bmp)/,
+            // 使用‘url-loader’或‘raw-loader’
+            loader: 'url-loader',
+            // 配置‘url-loader’
+            options: {
+              // 当文件大小处于(?)byte,输出‘base64’,反之为‘url’.
+              // 这里设为‘false’,表示无论多大多小,都为‘url’.
+              limit: false,
+              // 处理引入地址‘code’编码为‘utf-8’
+              encoding: true,
+              // 若输出为‘url’,需要指定存储目录
+              outputPath: 'media/image'
+            }
+          }
+        ]
+      },
+      // 解析
+      resolve: {
+        // 为‘import’或‘require’定义别名路径
+        alias: {
+          '~': requireResolve('src'),
+          'common': requireResolve('src/common'),
+          'components': requireResolve('src/components')
+        }
+      },
+      // 插件
+      plugins: [
+        // 定义输出‘html’模板
+        // 并向‘window’全局注入变量
+        new HtmlWebpackPlugin(Object.assign({ template: requireResolve('public/index.html') }, windowInject)),
+        // 对分离的‘css’区块定义同步导入名称,和异步导入名称
+        new MiniCssExtractPlugin({
+          // 同步导入‘import | require’
+          filename: 'static/css/[id].css',
+          // 异步导入‘import | require’
+          chunkFilename: 'static/css/[id].css'
+        }),
+        // 注入全局变量到项目中,从‘jjb.config.contextData’读取
+        new webpack.DefinePlugin({ 'process.env.app': JSON.stringify(contextData) }),
+        // 解决‘moment.js’本地化文件过多问题
+        // 按需加载本地化文件当前项目只需要‘zh_CN.js’
+        new webpack.IgnorePlugin({
+          contextRegExp: /moment$/,
+          resourceRegExp: /^\.\/locale$/
+        }),
+        // 每次打包前删除‘dist’目录
+        new CleanWebpackPlugin()
+      ],
+      // 打包优化
+      optimization: isProduction
+        ? {
+          // 是否启用优化
+          minimize: true,
+          // 优化插件
+          minimizer: [
+            // 压缩‘javascript’代码
+            new TerserWebpackPlugin({ extractComments: false }),
+            // 压缩‘css’代码
+            new CssMinimizerWebpackPlugin()
+          ],
+          // 分离‘区块’
+          splitChunks: {
+            // 分离范围‘all’即所有
+            chunks: 'all',
+            // 分离大小范围0
+            minSize: 0,
+            // 分离大小范围100000
+            maxSize: 100000,
+            // 同一个区块被调用两次,需要分离
+            minChunks: 2,
+            // 最大异步请求区块
+            maxAsyncRequests: 6,
+            // 最大初始化请求区块
+            maxInitialRequests: 4
+          }
+        }
+        : {}
+    }
+  };
+};