Design and Implementation of a Frontend Business Component Library (ZjDesign)

The article begins by identifying two main challenges faced by growing frontend teams—component reuse and maintaining code consistency—and proposes a business component library as a solution to improve development efficiency, ensure uniform implementation, guarantee quality, simplify maintenance, and promote knowledge sharing.

It then analyses the implementation process, outlining six modules (overall architecture, build, quality monitoring, site setup, component quality, and SOP) that guide the creation of the library.

Overall Architecture Design : The discussion compares a single‑package approach, where all components are bundled into one NPM package, with a multi‑package (monorepo) approach that isolates each component into its own package. Advantages and drawbacks of each method are listed, emphasizing trade‑offs in coupling, maintenance cost, and on‑demand loading capabilities.

Component Library Build : After selecting the architecture, the article examines build tools, contrasting webpack (suitable for component libraries and applications) with Rollup (ideal for pure JS libraries). It provides a concise Rollup usage flow and a detailed comparison of the two bundlers.

let foo = () => {
  let x = 1;
  if (false) {
    console.log("never reached");
  }
  let a = 3;
  return a;
};
let baz = () => {
  var x = 1;
  console.log(x);
  post();
  function unused() {
    return 5;
  }
  return x;
  let c = x + 3;
  return c;
};
baz();

The article also presents a Rollup configuration example for building the library in multiple formats (esm, cjs, umd) and handling external dependencies such as Vue and ECharts.

{
  input: file,
  output: {
    compact: true,
    file: `lib/index.js`,
    format: 'es',
    name,
    sourcemap: false,
    globals: { echarts: 'echarts', vue: 'Vue' }
  },
  external: ['echarts', 'vue'],
  plugins: [
    replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    vue({ css: false, template: { isProduction: true }, modules: true, styles: { scoped: true, trim: true } }),
    postcss({ extract: true, modules: false, scoped: true, sourceMap: false, autoModules: true, plugins: [simplevars(), nested(), cssnano(), base64({ extensions: ['.png', '.jpeg', '.jpg', '.gif'], root: './assets/' }), autoprefixer({ add: true })], extensions: ['.css', '.less'], use: { less: { javascriptEnabled: true } } }),
    babel({ runtimeHelpers: true, exclude: 'node_modules/**', plugins: [['@babel/plugin-proposal-optional-chaining', { loose: false }]], presets: [['@babel/preset-env', { targets: '> 0.25%, not dead' }]] }),
    url({ limit: 10 * 1024, emitFiles: true }),
    progress(),
    buble({ transforms: { forOf: false } }),
    uglify({ ie8: true })
  ]
}

Version control is addressed with npm scripts that automate semantic version bumps (major, minor, patch) and publishing to a private registry, illustrating how to integrate version updates into the build pipeline.

"scripts": {
  "test": "npm version patch && cross-env NODE_ENV=testing node build/build.js",
  "rollup": "rollup -c rollup.config.js",
  "publish:major": "npm version major && npm publish",
  "publish:minor": "npm version minor && npm publish",
  "publish:patch": "npm version patch && npm publish",
  "publish:beta": "npm version prerelease --preid=beta && npm publish --tag=beta"
}

The article then walks through a concrete component demo structure, describing how markdown files, Vue component files, and a custom Docs plugin transform documentation into usable Vue components. Code snippets for the Docs plugin and markdown‑to‑Vue transformer are provided.

export default (options: Options = {}): Plugin => {
  const { root, markdown } = options;
  const vueToMarkdown = createVueToMarkdownRenderFn(root);
  const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
  return {
    name: 'vueToMdToVue',
    async transform(code, id) {
      if (id.endsWith('.vue') && id.includes('/demo/') && !id.includes('index.vue')) {
        const res = vueToMarkdown(code, id);
        return { code: res.ignore ? res.vueSrc : (await markdownToVue(res.vueSrc, id)).vueSrc, map: null };
      }
    }
  };
};

Finally, a SOP (Standard Operating Procedure) for component development is outlined, covering design, review, development, documentation, code review, testing, acceptance, and release, emphasizing consistent practices and collaborative workflows.

In conclusion, the ZjDesign component library has continuously expanded, improving development efficiency, reducing duplicate work, and providing a unified technical platform that accelerates product delivery and enhances overall development processes.