发布一个npm 组件库 vue

最新推荐文章于 2023-06-20 15:48:36 发布

小墨宝

最新推荐文章于 2023-06-20 15:48:36 发布

阅读量596

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_38935512/article/details/115730925

版权

vue 专栏收录该内容

130 篇文章 1 订阅

订阅专栏

let path = require("path"); //内置模块，相对路径解析成绝对路径
let webpack = require("webpack"); 引用webpack内置插件集合
let CleanWebpackPlugin = require("clean-webpack-plugin"); //打包去除原有的文件夹
let MiniCssExtractPlugin = require("mini-css-extract-plugin"); //外链css 插件
const VueLoaderPlugin = require("vue-loader/lib/plugin");

// console.log(MiniCssExtractPlugin, 11111111111);
module.exports = {
    mode: "production",
    entry: {
        home: "./src/index.js"
        // home: "./src/index1.js"
    }, //入口
    output: {
        filename: "bundle[name].js", //打包后得文件名  加上这个bundle[hash].js  产生一个哈希值
        path: path.resolve(__dirname, "dist"), //路径必须是绝对路径,__dirname当前目录下，不加也可以
        globalObject: "this",
        library: "ceshi_uiui",
        libraryTarget: "umd",
        umdNamedDefine: true
    },

    plugins: [
        // 打包去除原有的dist  具体配置可以看这个文档https://www.qdtalk.com/2018/11/17/clean-webpack-plugin/
        new CleanWebpackPlugin(["dist"], {
            exclude: ["dll"]
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css" //外链得css名
        }),

        new VueLoaderPlugin()
    ],
    // 模块加载
    module: {
        // noParse: /jquery/, //不需要解析的插件里面的依赖关系， 比如bootstrap中就有依赖关系  多个/jquery|lodash/,
        // loader 模块加载器
        rules: [
            //规则 css-loader 解析@important这种语法
            //style-loader 把css插入到head得标签中(也可以是底部)
            // less-loader 解析less成css
            // loader 特点单一,use使用字符串单个， 多个得话写成数组["style-loader", "css-loader"]。loader得顺序是右往左 从下往上
            // loader还可以写成对象方式
            {
                test: /\.css$/,
                use: [
                    // {
                    //     loader: "style-loader",
                    //     options: {
                    //         insertAt: "top", //css打包之后在顶部 默认在底部
                    //     },
                    // },
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader"
                ]
                // include: path.resolve(__dirname, "src"), //只在src下找
            },
            // 处理less  sass stylus...
            {
                test: /\.less$/,
                use: [
                    // {
                    //     loader: "style-loader",
                    //     options: {
                    //         // insertAt: "top", //css打包之后在顶部 默认在底部
                    //     },
                    // },
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "less-loader"
                ],
                include: path.resolve(__dirname, "src") //只在src下找
            },
            // js语法转换
            {
                test: /\.js$/,
                // use: "Happypack/loader?id=js",
                use: {
                    loader: "babel-loader",
                    options: {
                        // 插件库，预设
                        presets: [
                            "@babel/preset-env" //js es6语法转换
                        ],
                        plugins: [
                            [
                                "@babel/plugin-proposal-decorators",
                                { legacy: true }
                            ], //语法 @log 装饰器 转换
                            "@babel/plugin-proposal-class-properties", //转换 class   es7语法使用@babel/polyfill,全局require
                            "@babel/plugin-transform-runtime" //可以转换异步得语法，比如promise, 做了简单得优化，比如抽离公共得部分
                        ]
                    }
                },
                include: path.resolve(__dirname, "src") //只在src下找
                // exclude:/node_modules/,             //排除。。。。
            },
            // eslint js语法验证
            // {
            //     test: /\.js$/,
            //     use: {
            //         loader: "eslint-loader",
            //         options: {
            //             enforce: "pre", // 强制previous优先执行 post之后执行  保证在js转换之前执行
            //         },
            //     },
            // },
            // 图片解析加载 匹配js中得
            {
                test: /\png|jpe?g|gif$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 10 * 1024, //小于10k 解析成base64 大于正常产出图片
                        outputPath: "/img/"
                        // publicPath:"http://xxxxxxxxxxxxxxx"   图片加上绝对路径，比如说图片全部采用得是cdn
                    }
                }
            },
            // 图片解析加载 匹配html中得 create img标签 时
            {
                test: /\.html$/,
                use: {
                    loader: "html-withimg-loader"
                }
            },
            // 解析和转换.vue文件 //使用vue-loader@15以上都需要使用vueloaderplugin这个插件
            {
                test: /\.vue$/,
                use: {
                    loader: "vue-loader"
                }
            }
        ]
    }
};

package.json 直接复制npm i（一些插件版本都写了）package-lock.json文件比较长就不放了，到时候注意下面得插件得版本号，一些插件版本差异会出错

{
    "name": "homepro",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "ceshi_uiui": "^1.0.0",
        "core-js": "^2.6.5",
        "my_func_yyy": "^1.1.4",
        "vue": "^2.6.10",
        "vue-router": "^3.0.3",
        "vuex": "^3.0.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.0.4",
        "@vue/cli-plugin-eslint": "^3.0.4",
        "@vue/cli-service": "^3.0.4",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.16.0",
        "eslint-plugin-vue": "^5.0.0",
        "vue-template-compiler": "^2.6.10"
    }
}

3.新建一个src文件结构如下

下面说下各个文件得内容
button，input差不多

index.vue
<template>
    <button>组件按钮</button>
</template>

<script>
export default {
    name: "sButton"
};
</script>

index.js(为了方便可以单独引入)
import Component from "./index.vue";

/* istanbul ignore next */
Component.install = function(Vue) {
    Vue.component(Component.name, Component);
};

export default Component;

src/index.js 定义一个install 方法

import Button from "./compontents/button/index";
import Input from "./compontents/Input/index";
import "./style/commond.less";

// import Vue from "vue";

const components = [Button, Input];

// 存储组件列表
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
    // 判断是否安装
    if (install.installed) return;
    // 遍历注册全局组件
    components.forEach(component => {
        Vue.component(component.name, component);
    });
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
}

export default {
    Button,
    Input,
    install
};

3.发布包

1.配置package。json, name和webpack中得一致

2.验证名字是否重复 npm view myfuncYYY version 返回404就是可以用，返回得是版本号说明注册了

3.npm publish 发布/更新（npm unpublish xxx@1.1.1 删除版本号）

4.使用
也可以单独引入某个组件


import ceshi_uiui from "ceshi_uiui";

Vue.use(ceshi_uiui);

组件
<s-button></s-button><br />
        <s-input></s-input>

在这里插入图片描述

小墨宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发布一个npm 组件库 vue

目录Npm登录使用webpack，然后写一些组件发布包使用1.登录1.npm login 输入账号密码邮箱（输入密码得时候命令行没反应得不用管）2.如果是使用了淘宝镜像执行npm config set registry https://registry.npmjs.org/ 切换Npm镜像源3.再次登录2.使用webpack，然后写一些组件1.随便找个文件夹初始化 npm init 生成package.json文件2.新建 webpack.config.js 和 src
复制链接

扫一扫