vue + ts 打包发布至npm/yarn私服

背景

前两天突然接到任务，说：‘玉玺啊，你加入到xxx的开发中区，先完成一个打包发布并配合xx老师联调一下’，我说好的，但是~问题来了，此前我的代码并没有写过类似的打包的配置，当天下午就是两眼一抹黑，看了一下午，尝试了许多种解决方案，但是都没能解决。最后到了晚上，我突然想起公司的其他项目也有需要打包发布的，我立马去查看，欸！！经过不断的尝试，还是写出来了。

方案一

使用typescript的原生打包命令tsc，当然使用这个命令的前提是执行npm install typescript [-g]这条命令下去下载并安装，像这样

然后使用tsc -v命令查看我们安装的版本，在自己的项目中找到tsconfig.js，或者新建tsconfig.js文件，并加入一些属性，接下来demo展示。

{
  "compilerOptions": {
    "target": "esnext", // 目标语言的版本
    "module": "esnext", // 生成代码的模板标准
    "strict": true, // 是否开启严格模式
    "importHelpers": true, // 通过tslib引入helper函数，文件必须是模块
    "moduleResolution": "node",  // 模块解析策略
    "experimentalDecorators": true, //实验装饰器
    "skipLibCheck": true, // 跳过 Lib 检查    
	"esModuleInterop": true, // 允许export=导出，由import from 导入
    "allowSyntheticDefaultImports": true, // 允许合成默认导入
    "resolveJsonModule": true, //是否开启解析json模块
    "sourceMap": true, // 生成目标文件的sourceMap文件
    "baseUrl": ".", // 解析非相对模块地址，默认是当前目录
    "outDir": "./dist", // 打包输出路径
    "declaration": true, // 是否生成声明文件
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "src/config/index.ts",
    "typings"
  ],
  "exclude": [
    "node_modules",
    "/Users/xujinxing/zuoyebang/mis-square-sdk"
  ]
}

属性	类型	描述
files	array	需要编译的文件
include	array	需要编译的文件或目录
exclude	array	不需要编译的文件或目录如node_module
extends	srting	继承其他文件的配置
compilerOptions	object	编译选项，此属性配置非常多，仅解释demo(无则使用默认)
compileOnSave	boolean	保存自动编译

此种方案虽然是能够将项目打包，但我在其他项目引入的时候，控制台提示我，需要安装此依赖，所以这种方案被干掉了。

方案二

使用vue-cli集成的webpack来打包，当然你需要看一下你的项目的vue-cli的版本vue-cli3创建的vue工程是默认集成了webpack的配置，我这里是默认集成，所以我们只需要去修改vue.config.js即可，接下来demo展示.

const { join } = require('path')

const isProduct = ['production', 'prod'].includes(process.env.NODE_ENV)
const isLib = ['lib'].includes(process.env.NODE_TYPE)

module.exports = {
  // 入口文件等配置
  pages: {
    index: {
      // page入口文件
      entry: 'src/main.ts',
      // 模板来源
      template: 'public/index.html',
      // dist 文件输出名
      filename: 'index.html',
      // 模板标签
      title: 'test'
    }
  },
  css: {
  	// 是否将css 独立提取至文件中
    extract: true, 
    // 使用loader解析less
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
  chainWebpack: (config) => {
    config.module
      .rule('.js')
      .include.add(join(process.cwd(), 'src'))
      .end();
    config.module
      .rule('js')
      .include.add(/packages/)
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap((options) => {
        return options;
      });
    config.module // 压缩图片
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: "65-90", speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 }
      });
  },
  configureWebpack: (config) => {
    if (isProduct && isLib) {
      config.externals = {
        vue: 'Vue',
        'element-ui': 'element-ui',
        'axios': 'axios'
      };
    }
  },
  // 服务配置如端口
  devServer: {
    port: 8800, // 端口
    // eslint 报错遮盖页面
    overlay: {
      warnings: true,
      errors: true
    },
    proxy: 'http://localhost:4000'
  }
}

虽然写了webpack的配置，我打包发布后，在另外一个项目测试，项目提示三个错误，可能有loader版本过高导致的问题，请检查下载的loader版本，最后一种方法也是使用的此文件，所以打包失败了，也请先不要删除。

App.vue not found 
this.getOption not function
xxx.less not found

此处未放图是因为电脑重启了，方案二的实验没找到，就没截到图

方案三

其实就是前两个的合并，这需要求修改一下package.json 文件里的 script属性中的build属性变成vue-cli-service build && tsc这样，但是这种方案试过之后还是和方案二的报错是一致的，可能是我太菜了，导致也不知道webpack打包编译后有not found这种错误如何解决。这里也是希望大佬看到有指点指点。

方案四

在script属性中增加 lib属性，属性值如下所示 vue-cli-service build --target lib --name test --dist dist src/index.ts
--target 声明打包类型为lib
--name 包名
--dist 打包输出目录
[path] 入口文件

此方案可以成功的将我的工程打包，发布后也没有bug。

发布

发布至npm，首先我们要登录到npm执行npm login命令登录，使用npm puhlish命令发布如下所示

总结

遇事不要慌。。慢慢来，是问题总会有解决方案的。希望各位大佬指点一二