vuecli3+typescript发布npm包

demo

github传送门，如果觉得有用，就点个star吧

一：首先创建一个基于vue+ts的新项目

二：接下来修改项目目录

image

1、src目录

src/index.ts

src/component/index.ts

测试目录

三：接下来修改项目配置

1：需要增加一项名为‘LICENSE’的文件

有MIT license 等等，具体可自行百度

2：package.json文件

{

  "name": "vue-phone-preview",

  "version": "0.4.12",

  "private": false,

  "description": "pc端手机预览组件",

  "main": "dist/VuePhonePreview.common.js",

  "license": "MIT",

  "author": "xxx",

  "scripts": {

    "dev": "vue-cli-service serve",

    "build": "vue-cli-service build",

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

    "lint": "vue-cli-service lint",

    "test:unit": "vue-cli-service test:unit"

  },

  "repository": {

    "type": "git",

    "url": "git+https://github.com/aTong9/vue-phone-preview"

  },

  "keywords": [

    "vue",

    "vuejs",

    "typescript",

    "vuecli3.x"

  ],

  "engines": {

    "node": ">= 12.3.1",

    "npm": ">= 6.9.0"

  },

  "dependencies": {

    "@types/core-js": "^2.5.0",

    "babel-loader": "^8.0.6",

    "babel-polyfill": "^6.26.0",

    "cache-loader": "^4.1.0",

    "core-js": "^3.1.2",

    "postcss-pxtorem": "^4.0.1",

    "ts-loader": "^6.2.0",

    "uglifyjs-webpack-plugin": "^2.2.0",

    "vue": "^2.6.10",

    "vue-class-component": "^7.1.0",

    "vue-loader": "^15.7.1",

    "vue-property-decorator": "^8.3.0",

    "vue-style-loader": "^4.1.2",

    "vuex": "^3.0.1",

    "webpack": "^4.41.2"

  },

  "devDependencies": {

    "@types/chai": "^4.1.0",

    "@types/jest": "^24.0.19",

    "@types/node": "^10.12.18",

    "@vue/cli-plugin-babel": "^4.0.4",

    "@vue/cli-plugin-typescript": "^4.0.4",

    "@vue/cli-plugin-unit-jest": "^4.0.4",

    "@vue/cli-service": "^4.0.4",

    "@vue/test-utils": "1.0.0-beta.29",

    "chai": "^4.1.2",

    "css-loader": "^3.2.0",

    "node-sass": "^4.12.0",

    "sass": "^1.19.0",

    "sass-loader": "^8.0.0",

    "scss": "^0.2.4",

    "ts-jest": "^23.0.0",

    "tslint": "^5.20.0",

    "typescript": "~3.5.3",

    "vue-template-compiler": "^2.6.10"

  }

}

这里需要注意的几点是：
1、private要改为false
2、增加一项打包命令："build-bundle": "vue-cli-service build --target lib --name VuePhonePreview ./src/index.ts",
3、增加一项main，并且指向打包后的文件，例如："dist/VuePhonePreview.common.js"

3: vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.ts',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // vue 通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的图片路径，再用 url-loader 将小于 4kb 的
  // 图片内联，以减少 HTTP 请求的数量。所以我们可以通过 chainWebpack 调整图片的大小限制。例如，我们将
  // 图片大小限制设置为 13kb，低于13kb的图片全部被内联，高于13kb的图片会放在单独的img文件夹中。
  chainWebpack: config => {
    const imagesRule = config.module.rule('images')
    imagesRule
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { limit: 13312 }))
  },
  // 设置css: { extract: false },可以强制内联，就不会将css单独打包成一个文件，导致页面没有style
  css: { extract: false },
  productionSourceMap: false
}

四：最后就是npm注册，发布自己的组件

1、执行package.json里刚刚写好的build-bundle命令

打包后的文件目录

"main": "dist/VuePhonePreview.common.js",

3、创建 npm 账号以及发布流程

• 首先需要在 npm 创建一个账号
• 在终端执行 npm login 输入你注册的 npm 的账号和密码
• 发布你的包（每次修改发布前记得修改版本好然后执行npm run build-bundle）

这里需要注意:一定要确保本地镜像为 npm,不然无法提交成功

// 1.查询当前配置的镜像
npm get registry
//https://registry.npmjs.org/
// 设置成淘宝镜像
npm config set registry http://registry.npm.taobao.org/
// 换成原来的
npm config set registry https://registry.npmjs.org/

npm 发布包的一些相关命令

npm login           //登录npm
npm publish         //发布包
npm unpublish       //删除包

再发布前需要配置.npmignore 文件,忽略一些无用的文件

.*
/node_modules
/src
package-lock.json
webpack.config.js