npm开发包全局/按需加载

本实例采用vue2实例

1.创建项目

按照下面图片更改结构

2.vue.config.js 配置

const path = require('path')
const isProduction = !process.env.NODE_ENV === "development"
module.exports = {
    parallel:false,
    // 修改 src 目录 为 examples 目录
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    },
    // 强制内联CSS（使用组件时，不需要再引入css）
    css: {
        extract: false
    },
    // 别名
    configureWebpack: config => {
        config.resolve.alias['@'] = path.resolve('examples')
        config.resolve.alias['components'] = path.resolve('examples/components')
        config.resolve.alias['~'] = path.resolve('packages')
        // 生产环境配置
        if (isProduction) {
            config.mode = 'production'
            // 打包文件大小配置
            config.performance = {
                maxEntrypointSize: 10000000,
                maxAssetSize: 30000000
            }
        }
    }
}

3.配置package文件夹下index.js

// 引入封装好的组件
import EsTable from "./components/esTable/index.vue";
// import Confirm from "./confirm/index.vue";
import Dialog from "./components/dialog/index.vue";
// 将来如果有其它组件,都可以写到这个数组里
const coms = [EsTable, Dialog]; 

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};
// 如果是直接引入文件,就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
// 按需加载 引入处按照以下对应名字引入
// 按需加载时调用的是单个组件的配置文件中的install
export {
    EsTable,
    Dialog,
}
// 全局加载
export default install

4.配置单个组件的配置文件

import TempCom from './index';
TempCom.install = function (Vue) {
    Vue.component(TempCom.name, TempCom);
};
export default TempCom;

5. 添加package，json文件 script

"package": "vue-cli-service build --target lib ./packages/index.js --name <package-name> --dest <打包之后的包文件夹名称>"

6. 执行 yarn package

7.在打包后的文件夹下执行 npm init -y 生成package.json

非新增包时要修改 package.json 修改 version版本号（相同版本上传不成功）

8.npm 上传

npm publish 上传需要配置用户信息