@ywjt/spa-builder

@ywjt/spa-builder

TODO: description

Usage

const spaBuilder = require('@ywjt/spa-builder');

适用于单页面应用

创建项目目录

cp -r common_frontend/packages/antd_pure demo

添加公共库

cd demo
git init
git add .
git ci -m 'init'
git remote add common https://ywgit.gz4399.com/ywkf/common_frontend.git
git subtree add --prefix=common common master --squash
cd src
ln -s ../common/packages/app_common_spa_react16class_antd3_dva2 common

app及打包环境准备

cd demo
yarn install
cd common/build_webpack5_spa
yarn install

启动

cd demo
yarn start

登录认证

默认登录认证，若要切换到无登录认证，在src/route.jsx中改掉BasicLayout，并且注释掉srx/index.js中认证相关代码即可

src/route.jsx

// import AuthLayout from './common/layout/AuthLayout'
// import BasicLayout from './common/layout/BasicLayout'
import BasicLayout from './common/layoutWithoutLogin/BasicLayout'
...

const customRoutes = [
  // <Route path="/auth" component={AuthLayout} />,
	<Route path="/" component={withRouteConfig(BasicLayout)} />
]

src/index.jsx

...
const dvaConfig = {
  history: browserHistory,
  onError(error, dispatch) {
    if (error.response && error.response.config) {
      error.preventDefault();
      const method = error.response.config.method;
      if (method === 'get' && error.response.data.code === 999) {
        dispatch({
          type: 'global/showMsg',
          payload: { message: '登录信息已过期, 请重新登录。' },
        });
        // Cookie.remove(jwt.key);
        // Cookie.remove('_xsrf');
        // window.history.pushState(null, '登录页', '/auth')
        return;
      }
      dispatch({
        type: 'global/showMsg',
        payload: { message: error.message, type: 'error' },
      });
    } else {
      console.error(error);
    }
  },
};
...

覆盖默认的接口地址

默认的登录接口地址为/api/login，假设项目中登录接口地址为/api/auth/local，需要覆盖src/common/models/authApi.jsx中的接口地址，操作如下：

复制一份 auth model，改掉登录接口

cd src/models
cp ../common/models/{auth.jsx, authApi.jsx} .
vi authApi.jsx // 将/login 修改为/auth/local即可

在 models 注册入口剔除 common 中的 auth model

修改src/index.jsx

// 修改前
const commonModels = commonContext.keys().map(key => commonContext(key).default);

// 修改后
const commonModels = commonContext.keys().map(key => commonContext(key).default).filter(o => o.namespace !== 'auth');

在项目中修改webpack配置

在项目根据路下添加webpack.config.js，内容示例：

const path =require('path');
const CopyWebpackPlugin = require('../common/build_webpack5_spa/node_modules/copy-webpack-plugin')
const HtmlWebpackTagsPlugin = require('../common/build_webpack5_spa/node_modules/html-webpack-tags-plugin')
const { AlterAssetTagsPlugin } = require('./webpack.plugins.js');
module.exports = function (config) {
  if(!config.plugins) {
    config.plugins = [];
  }
  config.plugins.push(
    new CopyWebpackPlugin({patterns: [
      {from: path.resolve(__dirname, 'public/feishu'), to: 'feishu', toType: "dir"},
      {from: path.resolve(__dirname, 'src/hello.js'), to: 'hello.js', toType: "file"}
    ]}),
    new HtmlWebpackTagsPlugin({ tags: ['hello.js'], append: true })
  );
  config.plugins.push(new AlterAssetTagsPlugin())
  return config;
}

修改已有webpack.plugins的配置

方法一（野路子）：基于某个特征找到plugin进行修改

const path =require('path');
module.exports = function (config) {
  if(!config.plugins) {
    config.plugins = [];
  }
  try {
    config.plugins.forEach(item => {
      if(item.userOptions && item.userOptions.filename === 'index.html') {
        item.userOptions.meta = {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no'
        }
        throw new Error('break');
      }
    })
  } catch(err) {
  }
  return config;
}

方法二：某些插件提供支持，如html-webpack-plugin提供hooks 比如插入meta标签，方法如下：

在项目根目录下创建webpack.plugins.js，自己写一个webpack插件：

const HtmlWebpackPlugin = require('../common/build_webpack5_spa/node_modules/html-webpack-plugin');

class AlterAssetTagsPlugin {
  apply (compiler) {
    compiler.hooks.compilation.tap('AlterAssetTagsPlugin', (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync(
        'AlterAssetTagsPlugin',
        (data, cb) => {
          data.assetTags.meta = [{
            tagName: 'meta',
            attributes: {
              name: 'viewport',
              content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no'
            }
          }];
          cb(null, data)
        }
      )
    })
  }
}

exports.AlterAssetTagsPlugin = AlterAssetTagsPlugin;

在项目根目录下创建webpack.config.js，内容如下：

const { AlterAssetTagsPlugin } = require('./webpack.plugins.js');

module.exports = function (config) {
  if(!config.plugins) {
    config.plugins = [];
  }
  config.plugins.push(new AlterAssetTagsPlugin())
  return config;
}