手把手教你封装 Vue 组件并使用 NPM 发布(2)

// ... 此处省略代码
const NODE_ENV = process.env.NODE_ENV
module.exports = {
  // 根据不同的执行环境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
  output: {
    // 修改打包出口,在最外级目录打包出一个 index.js 文件,我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'custom-ui.js',
    library: 'custom-ui', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  // ... 此处省略代码
}

然后, 再修改package.json 文件:

// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 import custom-ui 的时候它会去检索的路径
"main": "dist/unisoft-ui.js",

发布命令只有两步骤:

npm login  // 登陆
npm publish // 发布

完成之后我们就可以在项目中安装使用了

在项目中使用unisoft-ui

在自己的项目中使用unisoft-ui, 先从 npm 安装

npm install unisoft-ui -S

在 mian.js 中引入

import UniSoftUI from 'unisoft-ui'
Vue.use(UniSoftUI)

在组件中使用:

<template>
  <div>
    <h1>{{msg}}</h1>
    <uni-switch v-model="isSwitch">
      <span>{{switchText}}</span>
    </uni-switch>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: 'welecom to unisoft-ui',
        isSwitch: false,
      }
    },
    computed: {
      switchText() {
        return this.isSwitch ? '开' : '关';
      }
    },
  }
</script>

注意: 在发布npm包之前要先修改 .gitignore 去掉忽略 dist, 因为我们打包的文件也需要提交;每次上到 npm 上需要更改版本号,package.json 里的 version 字段。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/4f1de2c719c715788e3f174a51fa41f3.html