vue3+ts开发组件上传到npm全过程

以下是我摸索的步骤，但是不是完美的，不知道有没有人有更完美的步骤呢？可以指点下，我的qq是295183917

1.新建项目

vue create 项目名新建一个工程，选择vue3和typescript

2.创建组件

在components文件夹下创建组件，用vue3+ts的写法，这个我具体不写了。同时创建一个index.ts文件作为入口文件

2.1 扩展知识点

我这个库依赖了vant的库，我们可以npm i vant@next -D安装vant

注意是-D不是-S，就是打包的时候不打包vant库。如果你还要依赖其他的库，你也都用-D安装进去，同时把之前的vue库也移动到devDependencies里面去。

3.index.ts配置

我使用了最简单的配置，把我的两个自定义组件引入

export { default as ZLImage } from './ZLImage.vue'
export { default as ZLText } from './ZLText.vue'

4.打包

webpack打包配置，配置入口文件，就是你components的index.ts文件，输出目录在dist文件夹，解析less，ts等文件使用的loader等等

entry: './src/components/index.ts', // 入口文件，就是上步骤的src目录下的index.js文件，
  output: {
    path: path.resolve(__dirname, './dist'), // 输出路径，就是上步骤中新建的dist目录，
    publicPath: '/dist/',
    filename: 'ZLUI.min.js',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }, {
      test: /\.less$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'less-loader' }
      ]
    }, {
      test: /\.[js|ts]$/,
      exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
      loader: 'babel-loader'
    }, {
      test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
      loader: 'url-loader',
      query: {
        limit: 30000,
        name: '[name].[ext]?[hash]'
      }
    }]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]

package.json配置

"peerDependencies": {
  "vant": ">=3.0.0",
  "vue": ">=3.0.0"
},

build名字更改为：

--target lib 指以库的形式打包

--name ZLUI 打包后文件名字 ZLUI.umd.min.js

最后一个是打包的入口文件 src/components/index.ts

"build": "vue-cli-service build --target lib --name ZLUI src/components/index.ts",

打包完在dist目录就生成了ZLUI.umd.js和ZLUI.common.js

5.生成index.d.ts的ts声明文件

我这边是手动生成的，不知道各位有什么自动生成方法？借助了工具vue-dts-gen。两个组件各生成两个.d.ts文件，然后在dist目录下创建一个index.d.ts文件，把那两个.d.ts的文件里面的代码都拷贝进去，合成一个文件。当然，export导出的名字要修改下。

6.发布到npm

配置package.json

"name": "你的库在npm上的名字",
  "version": "0.0.1",
  "private": false,    // 一定要改成false
  "description": "你的库的简介",
  "author": "作者名字",
  "main": "dist/hsrc-ui.umd.js",    // 库的主入口，一定要设置
  "module": "dist/hsrc-ui.umd.js",  // moudle入口，一定要设置
  "types": "dist/index.d.ts",       // 重点，ts的库一定要写，声明文件为index.d.ts
  "license": "MIT",    
  "files": [
    "dist"    // 重点，上传的时候只上传dist文件夹的内容
  ],

最后npm publish就可以了。大功告成！

7.未解决问题

1. 引入只能 import { xxx } from 'xxx'引入，不能像vant一样通过app.use(xxx)引入，不知道谁懂得插件形式引入的，麻烦加我QQ指点下。

2. 目前还是手动生成ts声明文件，不知道如何自动生成。谁会编写脚本的麻烦也告诉我下。

3. 在组件内部不能使用main.ts定义的全局过滤器

app.config.globalProperties.$filters = {
  formatDate (timeStamp: number) {
    return dayjs(timeStamp).format('YYYY-MM-DD')
  }
}

不知道有什么方法使用组件内部的过滤器

4. 目前所有组件都打包在一个umd.js文件里了，希望向elementui那样dist文件夹内一个组件一个文件夹，里面有js文件和.d.ts文件，还没研究出怎么配置

附图，element-ui打包后的dist文件夹