vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue2自定义组件发布npm

vue2自定义组件通过rollup配置发布到npm的详细步骤

作者：H_shaohui

这篇文章主要介绍了vue2自定义组件通过rollup配置发布到npm,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

创建Vue组件库项目首先，我们需要创建一个Vue组件库的项目。我们可以使用Vue CLI来快速创建一个基础的Vue项目。

vue create my-component-library

配置rollup接下来，我们需要配置rollup以构建我们的组件库。创建一个名为rollup.config.js的文件并添加以下代码：

import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
export default [
  {
    input: 'src/main.js',
    output: [
      {
        file: 'dist/my-component-library.js',
        format: 'esm',
      },
      {
        file: 'dist/my-component-library.min.js',
        format: 'esm',
        plugins: [
          terser({
            output: {
              ecma: 6,
            },
          }),
        ],
      },
    ],
    plugins: [
      vue(),
      resolve({
        extensions: ['.js', '.vue'],
      }),
      commonjs(),
      babel({
        exclude: 'node_modules/**',
        plugins: ['@babel/external-helpers'],
      }),
    ],
    external: ['vue'],
  },
];

这个配置文件告诉rollup如何构建我们的组件库。它使用了一些常用的rollup插件，例如vue、babel、commonjs和resolve。其中，我们将Vue作为外部依赖，因为我们将在应用中使用Vue，而不是在组件库中打包Vue。我们使用了两个输出配置项，一个是未压缩的文件，一个是压缩后的文件。这两个文件将以ES模块的形式输出，以便其他项目可以使用import语法导入我们的组件库。

3. 编写组件在src目录下，我们可以创建我们的Vue组件。例如，在src/components目录下，我们可以创建一个Button.vue组件。

<template>
  <button class="btn" :class="type">{{ text }}</button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    text: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'primary',
    },
  },
};
</script>
<style>
.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
.primary {
  background-color: #42b983;
  color: #fff;
}
.secondary {
  background-color: #fff;
  color: #42b983;
  border: 1px solid #42b983;
}
</style>

4.导出组件在src/main.js中，我们可以导出我们的组件。

import Button from './components/Button.vue';
export { Button };

5.构建组件库现在，我们可以使用npm run build命令来构建我们的组件库。这将使用我们在步骤2中创建的rollup配置文件来构建组件库。

5.1.在打包发布之前，还需要package.json的配置

这个文件包含了我们的项目信息和依赖信息。我们需要确保package.json文件中的信息正确，以便其他人使用我们的组件库时可以正确地安装和使用它。

下面是一个示例package.json文件：

{
  "name": "my-component-library",
  "version": "1.0.0",
  "description": "A Vue component library",
  "main": "dist/my-component-library.js",
  "module": "dist/my-component-library.esm.js",
  "files": [
    "dist/*",
    "src/*"
  ],
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "vue",
    "component",
    "library"
  ],
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@vue/component-compiler-utils": "^3.1.1",
    "babel-plugin-external-helpers": "^6.22.0",
    "rollup": "^1.20.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^5.1.2",
    "rollup-plugin-vue": "^5.1.9"
  }
}

我们需要确保以下信息正确：

npm install

接下来，我们可以使用npm run build命令构建我们的组件库，使用npm publish命令将其发布到npm上。

npm run build

6.发布组件库一旦我们构建了我们的组件库，我们可以将其发布到npm上。确保你已经在npm上注册了一个账号。然后，使用以下命令登录：

npm login

然后，使用以下命令发布组件库：

npm publish

7.在其他项目中使用组件库现在，我们已经将组件库发布到npm上了，我们可以在其他项目中使用它。首先，我们需要安装组件库：

npm install my-component-library

然后，我们可以在我们的Vue应用中import我们的组件：

import { Button } from 'my-component-library';
export default {
  name: 'App',
  components: {
    Button,
  },
};

现在，我们可以在我们的Vue应用中使用我们的Button组件了。

到此这篇关于vue2自定义组件通过rollup配置发布到npm的文章就介绍到这了,更多相关vue2自定义组件发布到npm内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文