coral-cli6

基于webpack5 module federation conf 统一B端cli

🙋‍♂️ 快速开始

• 初始化 ufy 项目： npx @coral/cli init

📦 安装

npm i -g @coral/cli or yarn global add @coral/cli

👨‍💻 指令

• coral init 初始化项目
• coral dev 调试
  • coral dev --hot 热更
  • coral dev --open 打开调试页面
• coral build 构建
  • coral build --env 指定 部署环境
  • coral build --analyze 分析
• coral help

✍🏻 环境变量 & 配置文件

• MODE_ENV webpack mode 环境变量 , 通过 process.env.MODE_ENV[推荐] 或者 process.env.NODE_ENV 调用
• CORAL_ENV 通过 coral dev --env prod 进行设置 用来区分不同环境 , 通过 process.env.CORAL_ENV 调用
• 项目根目录下新建一个coral-config.js|ts

  const {resolveApp} = require('@coral/cli/helpers/paths')
  const {proxy} = resolveApp('./package.json');
  module.exports = ({ config, env, coralEnv }) => {
    const port = 8000;
    const url = {
      prod: '线上环境地址',
      test: '测试环境地址',
      dev: `http://localhost:${port}/`,
    };
    const publicPath = url[coralEnv] || `http://localhost:${port}/`;
    config.output.publicPath(publicPath);
    
    config.devServer.port(port);
    config.devServer.proxy(proxy || {});

    // 让其他svg loader不对src/assets/icon进行操作
    config.module
      .rule('svg')
      .exclude.add(resolveApp('src/assets/svg'))
      .end();
    config.module
      .rule('icon')
          .test(/\.svg$/)
          .include.add(resolveApp('src/assets/svg'))
          .end()
          .use('svg-sprite-loader')
              .loader('svg-sprite-loader')
              .options({
                symbolId: 'icon-[name]',
              })
              .end();

    // 配置 index.html
    config.plugin('html').tap((args) => {
      args[0] = {
        ...args[0],
        ...{
          title: 'Lexios',
          files: {
            js: [], // 注入到index.html,js,如rem.js
            css: [],
          },
        },
      };
      return args;
    });
  };

👩🏻‍💻 VSCODE SETTINGS

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib", //支持 ts css module type check
  "typescript.enablePromptUseWorkspaceTsdk": true   //支持 ts css module type check
}