发包基础教学

modern

特点：

• 基于 esbuild 构建，构建速度极快。
• 无需过多配置即可开发你的 npm 包，内置预设覆盖多种场景。
• 集成了 Storybook，你可以使用它调试 UI。

pnpm add @modern-js/module-tools @modern-js/tsconfig @modern-js/plugin-storybook -D

# 纯ts构建输出包
pnpm modern build

# 打包storybook，可以在 dist/storybook-static 目录看到构建产物文件
pnpm modern build --platform storybook

# Storybook调试
pnpm modern dev

//modern.config.ts
import { moduleTools, defineConfig, BaseBuildConfig } from '@modern-js/module-tools'
import { storybookPlugin } from '@modern-js/plugin-storybook'

export default defineConfig(() => {
  return {
    plugins: [
      moduleTools(),
      storybookPlugin(),
      {
        name: 'plugin-module-banner',
        setup: () => ({
          // 自定义插件：输出的esm文件自动导入css样式
          beforeBuildTask(config: BaseBuildConfig): BaseBuildConfig {
            const newConfig = { ...config }
            if (newConfig.format === 'esm') {
              newConfig.banner.js = 'import "./index.css";'
            }

            return newConfig
          }
        })
      }
    ],
    buildPreset: 'npm-library'
  }
})

rspack

特点：

• 基于 Rust，项目启动速度极快。
• 内置增量编译机制，HMR 速度极快，完全胜任大型项目的开发。
• 针对 webpack 的架构和生态进行兼容，无需从头搭建生态。
• 对 Typescript、JSX、CSS、CSS Modules、Sass 等提供开箱即用的支持。
• 默认内置多种优化策略，如 Tree Shaking、代码压缩等等。

pnpm add @rspack/cli @swc/register -D

# 运行库文件预览
pnpm rspack serve

import { Configuration } from '@rspack/cli'
import path from 'path'

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        ['autoprefixer'],
        // ['postcss-plugin-px2rem', {
        //   rootValue: 100,
        //   unitPrecision: 5,
        //   ignoreIdentifier: 'no',
        //   minPixelValue: 2
        // }]
      ]
    }
  }
}

const config: Configuration = {
  entry: {
    main: './test/index.tsx'
  },
  builtins: {
    html: [
      {
        template: './test/index.html'
      }
    ],
    react: {
      runtime: 'classic'
    }
  },
  resolve: {
    alias: {
      src: path.resolve(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          postcssLoader,
        ],
        type: 'css',
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'sass-loader',
          },
          postcssLoader
        ],
        type: 'css',
      },
    ],
  }
}

export default config

版本管理与发布

一个 npm 类型的模块项目发布流程包含了两个阶段：

• 第一阶段是在开发期间，开发者需要提供变更文件，该文件记录了在发布期间需要的变更内容；
• 第二阶段是在发布期间，Modern.js Module 会收集所有的变更文件来更新版本、更新发布日志，并发布新的包到 npm Registry 上。

{
  "lint": "modern lint",
  "change": "modern change",
  "pre": "modern pre",
  "bump": "modern bump",
  "release": "modern release --tag"
}

发布bate版

执行pnpm modern change选择要发布的包、选择发布的版本号(major、minor、patch)、填写changlog。

执行pnpm modern pre enter bate进入预发布模式 执行pnpm modern bump命令更新具体的版本号

此时不会真正的“消耗”记录变更的 Markdown 文件 执行pnpm modern release --tag beta发布 最后执行pnpm modern pre exit退出预发布版本。

发布rc版本

把以上步骤的beta改成rc即可。

发布正式版本

执行pnpm modern change选择要发布的包、选择发布的版本号(major、minor、patch)、填写changlog。

切记不要执行pnpm modern pre enter bate

执行pnpm modern bump命令更新具体的版本号

执行pnpm modern release --tag latest发布。