使用typescript开发Vue组件库

2019-09-08 10:44:08 138 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Vue3组件库开发指南：用Monorepo管理多个npm包（Rollup+TypeScript）本文详细介绍了如何利用Monorepo架构与Rollup构建工具，高效开发和管理Vue3组件库。通过搭建pnpm workspace、配置TypeScript和Rollup多格式打包，解决了传统单一包结构在依赖管理、构建效率和按需引入方面的痛点，实现组件的高内聚、低耦合与独立发布。阅读详情

自己用typescript开发一个vue的组件库，使用vue-cli3.0搭建的工程；开发完成后打包引用出现了一点问题，求大神指点
vue.config.js



var path = require('path');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const nodeExternals = require('webpack-node-externals');

const CopyWebpackPlugin = require('copy-webpack-plugin');

const WebpackStringReplacePlugin = require('webpack-string-replace-plugin');

module.exports = {

    configureWebpack: {

        devtool: 'source-map',

        mode: "development",

        // mode: "production",

        entry: './src/main.ts',

        output: {

            path: path.resolve(__dirname, './dist'),

            filename: 'test.js',

            libraryTarget: 'commonjs2',

        },

        externals: [nodeExternals()],

        plugins: [

            new MiniCssExtractPlugin({

                filename: "test.css"

            }),

            new CopyWebpackPlugin([{

                from: 'src/assets',

                to: 'assets'

            }]),

            new WebpackStringReplacePlugin([{

                file: 'test.css',

                match: /url\(\.\.\/img/g,

                replacement: function (match) {

                    return 'url(/img';

                }

            }])

        ],

        resolve: {

            alias: {}

        },

        module: {

            rules: [{

                test: /\.css$/,

                use: [

                    MiniCssExtractPlugin.loader,

                    "css-loader"

                ]

            }],

        },

        optimization: {

            splitChunks: {

                cacheGroups: {

                    styles: {

                        name: 'styles',

                        test: /\.css$/,

                        chunks: 'all',

                        enforce: true

                    }

                }

            },

        },

    },

    chainWebpack: config => {

        config.optimization.delete('splitChunks');

    }

}

main.ts





import Vue from 'vue';

import Home from './views/Home.vue'



console.log(Home);

const PageMap: Map<string, any> = new Map();

PageMap.set('test', Home);

const install = (vue: any) => {

    PageMap.forEach((val: any, key: string) => {

        console.log(val);

        vue.component(key, val);

    });

};



export default {

    install

};

export {PageMap}

package.json



{

  "name": "mytest",

  "version": "0.1.0",

  "private": true,

  "scripts": {

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

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

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

  },

  "dependencies": {

    "core-js": "^2.6.5",

    "element-ui": "^2.12.0",

    "vue": "^2.6.10",

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

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

    "vue-router": "^3.0.3"

  },

  "devDependencies": {

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

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

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

    "sass": "^1.18.0",

    "sass-loader": "^7.1.0",

    "typescript": "^3.4.3",

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

    "webpack-node-externals": "1.7.2",

    "webpack-string-replace-plugin": "1.0.0"

  },

  "main": "dist/test.js"

}