基于Typescript开发React的NPM包

创建项目

mkdir demo && cd demo
npm init -y
mkdir src

添加Typescript

npm install -D typescript
tsc --init

配置tsconfig.json

给出一份基本的配置，更多配置可以自己去生成文件里查看

{
  "compilerOptions": {
     "target": "es5",            //指定ECMAScript目标版本 "ES3"（默认）
     "module": "commonjs",             //指定生成哪个模块系统代码
     "lib": ["DOM","ESNext","DOM.Iterable"],        //指定要包含在编译中的库文件
     "jsx": "react",            //指定JSX代码生成：“ preserve”，“ react-native”或“ react”
     "declaration": true,       //生成相应的'.d.ts'文件
     "declarationDir": "./dist",            //.d.ts文件的输出路径
     "outDir": "./dist",               //输出路径
     "rootDir": "./src",               //打包文件路径
     "strict": true,               //启用严格检查
     "esModuleInterop": true,        //通过为所有导入创建名称空间对象，启用CommonJS和ES模块之间的发射互操作性。
    "forceConsistentCasingInFileNames": true      //禁止对同一文件使用大小写不一致的引用。
  }
  "exclude":["./example/**/*","node_modules"]         //忽略编译文件
}

添加webpack

npm install webpack webpack-cli --save-dev
touch webpack.config.js

webpack.config.js配置

module.exports={
    entry:path.join(__dirname,'./src/index.tsx'),
    mode:'production',
    module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
          },
        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js','.jsx' ]
    },
    externals: {    //避免打包
      'react': {
          commonjs: 'react',
          commonjs2: 'react',
          amd: 'react',
          root: 'React',
      },
    },
    optimization: {
      minimizer: [new UglifyJsPlugin()],
    },
    plugins:[
      new CleanWebpackPlugin()
    ],
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'index.js',
        library: "ANTD_BASE_MODULE",
        libraryTarget:'umd',
        umdNamedDefine: true
    },
}

设置package.json

由于package.json文件配置过多，这边标注几个重要的配置

{
  "scripts": {
      "build": "webpack --mode production",
  },
  "main": "dist/index.js",      //主文件路径
  "types": "dist/index.d.ts",    //解释文件路径
  "dependencies": {},    //运行时所需要的插件，安装插件时默认安装在此
  "devDependencies": {}      //开发室所需要的插件，安装命令加  -D|--save-dev
  "files":["dist/"]      //上传npm的文件
}

打包

npm run build

本地测试

npm run build
npm link    //将本地打好的包挂载到全局
cd example //进入测试项目下
npm link ***    //将你的插件关联到测试项目下

上传到npm

npm login
npm publish

修改版本号

x表示主版本号,通常有重大改变或者达到里程碑才改变;
y表示次要版本号,或二级版本号,在保证主体功能基本不变的情况下,如果适当增加了新功能可以更新此版本号;
z表示尾版本号或者补丁号,一些小范围的修修补补就可以更新补丁号.

npm version patch <=> z++
npm version minor <=> y++ && z=0
npm version major <=> x+= && y=0 && z=0