如何搭建自己的组件环境

现在的需求是要将本地的常用组件封装成私有的包，按照网上的教程（https://www.cnblogs.com/zlp-blog/p/10718383.html）很容易实现。
但是现在有一个问题是我修改完需要打包执行npm publish上传到公司的私有库，然后在项目中修改包的版本号在下载下来，这样一来二去太几把蛋疼了，要是写错了调试太麻烦了，能不能在开发的时候就把这些问题都解决了再发布到公司的私有库。花了两个小时解决了这个问题，解决的方式如下。

1.先创建一个本地的项目，

vue create app2

2.按照自己的需求选择选择相应的插件，由于我代码都是用ts写的，所以我选了(ts,babel)
3.项目下载以后先执行 yarn serve yarn build保证能正常运行
4.接下来就是要修改我们的配置文件了

直接上代码了
vue.config.js

module.exports = {
  /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */

  /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
  publicPath: process.env.NODE_ENV === "production" ? "/public/" : "./",
  /* 输出文件目录：在npm run build时，生成文件的目录名称 */
  outputDir: "distPro",
  /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
  assetsDir: "assets",
  /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
  productionSourceMap: false,
  /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
  filenameHashing: false,
  /* 代码保存时进行eslint检测 */
  lintOnSave: true,
  /* webpack-dev-server 相关配置 */
  devServer: {
    // host:"localhost",//要设置当前访问的ip 否则失效
    open: true, //浏览器自动打开页面
    port: 8099,
    proxy: {
      "/api": {
        target: "http://192.168.0.1:8080",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");

module.exports = {
  devtool: "source-map",
  entry: "./plugin/index.js", //入口文件，plugin目录下的index.js文件，
  output: {
    path: path.resolve(__dirname, "./dist"), //输出路径，就是新建的dist目录，
    publicPath: "/dist/",
    filename: "main.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$/,
        exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        loader: "babel-loader"
      },
      {
        test: /\.ts$/,
        loader: "ts-loader",
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        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

{
  "name": "yt-axios",
  "version": "1.0.0",
  "description": "ajax包",
  "main": "/dist/main.min.js",
  "author": "wjh",
  "license": "ISC",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dist": "webpack --mode production --display-error-details --config webpack.config.js"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "js-cookie": "^2.2.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.0",
    "@vue/cli-plugin-typescript": "^4.2.0",
    "@vue/cli-service": "^4.2.0",
    "typescript": "~3.7.5",
    "vue-template-compiler": "^2.6.11",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.2",
    "vue-property-decorator": "^8.3.0",
    "webpack-cli": "^3.3.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

在tsconfig.json里添加 “noImplicitAny”: false,防止报错

这样基本上配置就可以了，剩下的缺啥安装上
5.在项目中使用
在main.ts里先引入在执行 下面是我自己写的代码 具体的可以按照自己的代码调用

总结：按照上诉配置基本上可以实现了自己封装插件的本地开发环境，我们可以在本地调试好后再打包，命令是yarn dist，打完包的体积跟搭建前是一样的，没有多余的代码，在真正的项目中引入的时候如果设置了externals，也是会排除的。没有问题后修改版本号在npm publish就可以在其他地方愉快的调用了。

待优化的点：每个组件都起一个项目太蛋疼，可以考虑跟element-ui一样引入，组件太多了可以考虑做微前端(vue+qiankun)。