3 posts tagged with "工程化"

import { registerMicroApps, start, setDefaultMountApp } from "qiankun";

registerMicroApps([
  {
    name: "reactApp",
    // 需要确保斜线结尾，防止资源加载异常
    entry: "/project/app1/",
    container: "#app1-root",
    activeRule: "/app1",
  },
  {
    name: "vueApp",
    entry: "/project/app2/",
    container: "#app2-root",
    activeRule: "/app2",
  },
]);

// 启动 qiankun
start({
  // 去除baidu脚本的跨域限制
  // 注意：这种方式只支持异步引入baidu sdk，不支持在script标签引入
  excludeAssetFilter: (url) => {
    return url.indexOf("api.map.baidu.com") !== -1;
  },
});
// 设置默认启动应用
setDefaultMountApp("/app1");

function loadBaiduJssdk(url) {
  return new Promise((resolve, reject) => {
    const scriptEl = document.createElement("script");
    scriptEl.type = "text/javascript";
    scriptEl.src = url;
    document.body.appendChild(scriptEl);
    scriptEl.onload = resolve;
    scriptEl.onerror = reject;
  });
}
// 异步加载
async function initMap() {
  await loadBaiduJssdk("https://api.map.baidu.com/api?v=3.0&ak=你的密钥");
}

// config-overrides.js
const setOutputForQiankun = () => (config) => {
  config.output.library = `${name}`;
  config.output.libraryTarget = "umd";
  config.output.globalObject = "window";
  return config;
};
// ...
module.exports = {
    webpack: override(
        setOutputForQiankun(),
        // ...
    )
    devServer: overrideDevServer((config) => {
        config.historyApiFallback = true;
        config.open = false;
        config.headers = {
          "Access-Control-Allow-Origin": "*",
        };
        return config;
    }),
}

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    "no-var-requires": 0,
  },
};

module.exports = {
  extends: "stylelint-config-standard",
  customSyntax: "postcss-less",
};

module.exports = {
  extends: ["@commitlint/config-conventional"],
};

const { override, addWebpackAlias } = require("customize-cra");
const path = require("path");

module.exports = {
  webpack: override(
    // 配置alias
    addWebpackAlias({
      ["@"]: path.resolve(__dirname, "src"),
      ["components"]: path.resolve(__dirname, "src/components"),
      ["mock"]: path.resolve(__dirname, "src/mock"),
    })
  ),
};

// config-overrides.js
const { override } = require("customize-cra");
// 需要先安装 yarn add customize-cra-less-loader -D
const addLessLoader = require("customize-cra-less-loader");

module.exports = {
  webpack: override(
    // ...
    // 添加less解析器
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
        sourceMap: false,
        // modifyVars: { '@primary-color': '#1DA57A' },
      },
    })
  ),
  // ...
};

declare module '*.less' {
 const content: { [className: string]: string };
 export default content;
}

const { override, adjustStyleLoaders } = require("customize-cra");

module.exports = {
  webpack: override(
    //...
    adjustStyleLoaders((rule) => {
      if (rule.test.toString().includes("less")) {
        rule.use.push({
          loader: "style-resources-loader",
          options: {
            patterns: path.resolve(__dirname, "src/styles/global.less"),
            injector: "append",
          },
        });
      }
    })
  ),
};

// config-overrides.js
const chalk = require('chalk');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
// ...
module.exports = {
  webpack: override(
    // ...
    addWebpackPlugin(
      new ProgressBarPlugin({
      format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`,
    }),
  ),
}

// config-overrides.js
const path = require("path");
const exec = require("child_process").execSync;

process.env.REACT_APP_NAME = require("./package.json").name;
process.env.REACT_APP_VERSION = require("./package.json").version;
process.env.REACT_APP_BUILD_TIME = new Date().toLocaleString("zh-CN", {
  hour12: false,
});
process.env.REACT_APP_GIT_COMMIT = exec('git rev-parse --short=8 HEAD')
  .toString()
  .trim();

// helper/utils/index.ts
/**
 * 显示项目配置信息，比如项目名、版本等
 */
export function showProjectInfo() {
  log.capsule(
    `${process.env.REACT_APP_NAME}`,
    `v${process.env.REACT_APP_VERSION}`
  );
  log.primary(`Build Time:  ${process.env.REACT_APP_BUILD_TIME}`);
  log.primary(`Last Commit: ${process.env.REACT_APP_GIT_COMMIT}`);
}

// config-overrides.js
const BundleAnalyzerPlugin =
  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// ...
  addWebpackPlugin(
    // ...
    new BundleAnalyzerPlugin(),
  ),

import { createContext } from "react";
import { makeAutoObservable } from "mobx";

// NOTE 如果要限制，得先确保所有代码只通过 action 修改 store 属性
// 否则渲染过程有打印 warning log，会造成一定的性能损耗
// configure({ enforceActions: "always" });

// Model the application state.
class CommonStore {
  count = 0;
  constructor() {
    makeAutoObservable(this);
  }
  add = () => {
    this.count++;
  };
  reduce = () => {
    this.count--;
  };
  get getCount() {
    return "count is " + this.count;
  }
}
export const commonStore = new CommonStore();
export const rootStore = {
  commonStore,
};

export const storeContext = createContext(rootStore);
export const StoreProvider = storeContext.Provider;

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  //...
} = require("customize-cra");

module.exports = {
  webpack: override(
    addDecoratorsLegacy(),
    disableEsLint()
    //...
  ),
};

// helper/utils/service.ts
import axios from "axios";
import { envConfig } from "@/config";

export const service = axios.create({
  baseURL: envConfig.baseUrl,
  timeout: 100000,
});

// Add a request interceptor
service.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
service.interceptors.response.use(
  function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  },
  function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  }
);

// services/index.ts
import { service } from "@/helper/utils/service.ts";

export async function getUserList(): Promise<IUserData[]> {
  const res = await service.get("xxx");
  if (res.code !== 200) {
    message.error(`message: ${res.msg}, error: ${res.errorMsg}`, 2.5);
    return;
  }
  // NOTE obj2CamelCase 用于转换下划线为驼峰命名，因为前端统一使用驼峰命名
  return obj2CamelCase(res.data) as IUserData[];
}

import { getUserList } from "./services/index.ts";
// 获取用户列表
const { data } = useRequest(getUserList, {
  manual: false,
  onSuccess: (data) => {
    //...
  },
});

import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  dsn: "xxx", // TODO 这个需要在 sentry 中注册后获取，create project 时注意选择 react 应用
  integrations: [new Integrations.BrowserTracing()],

  // 我们建议在生产中调整此值，或使用 tracesSampler 进行更精细的控制
  tracesSampleRate: 1.0,
});

const Koa = require("koa");
const router = require("koa-router")();
const bodyParser = require("koa-bodyparser");
const testData = require("./test.js");

const app = new Koa();
app.use(bodyParser());
app.use(router.routes());

router.get("/test", async (ctx, next) => {
  ctx.body = testData;
  await next();
});

// error-handling
app.on("error", (err, ctx) => {
  console.error("server error", err, ctx);
});

app.listen(3001);

const Mock = require("mockjs");

const data = Mock.mock({
  "list|1-10": [
    {
      "id|+1": 1,
    },
  ],
});

module.exports = data;