【面试题】：前端怎么实现组件的封装和上传

第一步：创建空白文件夹并安装依赖
创建 package.json  npm init -y 
安装 vue-loader    npm install vue-loader
安装 webpacl webpack-cli    npm install webpacl webpack-cli -D
第二步：创建 src 目录及文件
创建src目录
在src目录下创建components文件夹来存放我们的组件
在src目录下创建index.js入口文件
在components文件夹下创建testH1.vue组件
第三步：编写我们的组件 testH1.vue
<template>
    <h1 class="test-h1-box">
        <slot>测试文字</slot>
    </h1>
</template>

<script>
export default {
    name: 'testH1'
}
</script>

<style>
.test-h1-box{
    background: red;
    color: green;
    text-align: center
}
</style>
第四步：编辑 src 目录下的入口文件 index.js
// 引入组件
import sliderVerify_vue from './components/index.vue'

// 创建 install 函数
// vue.use 会默认查找并调用 install 函数
const SliderVerify = {
    install: (Vue) => {
        // 注意：第一个参数是组件名称，我们在页面引用时用到
        Vue.component(sliderVerify_vue.name, sliderVerify_vue)
    }
}

// 暴露 install 函数
export default SliderVerify;
第五步：在 testH1 目录下创建webpack.config.js，同 package.json 同级
const path = require('path')
module.exports = {
    devtool: "source-map",
    // 模式
    // mode: 'development', // 开发模式 生成普通 js 文件
    mode: 'production', // 生产模式 生成 .min.js 压缩文件
    // 入口
    entry: path.join(__dirname, './src/index.js'),
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: path.resolve(__dirname, 'dist'),
        // filename: 'testH1.js', // 生成的文件名 对应 开发模式
        filename: 'testH1.min.js', // 生成的文件名 对应 生产模式
        libraryTarget: 'umd', // 支持 ems / commontjs / requirejs 规范
        // libraryTarget: 'amd' // 支持 requirejs 规范
        umdNamedDefine: true
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    }
}
打包
打包命令 npx webpack
第六步：编辑 package.json 文件
{
    "name": "test-h1",
    "version": "1.0.0",
    "description": "自定义 h1 标签",
    "main": "dist/testH1.min.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [
        "H1",
        "标签",
        "vue",
        "vue插件"
    ],
    "author": "Mr.test",
    "license": "MIT",
    "devDependencies": {
        "vue-loader": "^14.2.4",
        "webpack": "^5.21.2",
        "webpack-cli": "^4.5.0"
    }
}
第七步：编辑 README.md
## 安装
npm install testH1
 
## 引入
import testH1 from 'testH1'
 
## 全局注册
Vue.use(testH1);

## 页面使用
<testH1> 文字内容 </testH1>
第八步：发布至 NPM
在npm官网注册账号：用户名 邮箱 密码
npm配置的中央仓库应是npm，如不是则运行以下命令  npm config set registry https://registry.npmjs.org/
添加用户，配置
npm addUser
依次添加：userName、password 和 Email
只需添加一次即可
上传至 npm   npm publish