npm 私服以及发布项目

weixin_43988317

已于 2023-02-09 11:52:41 修改

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

于 2023-02-06 14:00:27 首次发布

本文链接：https://blog.csdn.net/weixin_43988317/article/details/128900276

版权

1. 创建一个新的vue项目

vue create testban

选择项目的默认配置，回车执行。执行完毕后，当前文件夹下就会出现一个刚刚初始化的空vue项目：：testban

由于新版的vue-cli删除了默认的配置文件，因此我们在项目下新建一个vue.config.js，此时项目结构如下：

2. 配置vue.config.js

module.exports = {
      pages: {
        index: {
          entry: 'src/main.js,
          template: 'public/index.html,
          filename: 'index.html
        }
      },
      css: {
        extract: false   //强制使用内联样式，这样打包出的插件样式会内置在js中，不需要单独引入
      }
    }

接下来我们要配置一下项目的配置文件，代码如下：

这里是标准的vue.config.js配置。

pages参数指定了项目的入口js文件和要使用的HTML模板。

css参数的extract属性指定在打包时是否要生成单独的样式文件。如果将extract置为true，则项目打包后会生成单独的css文件，在引入的时候就必须同时引入这个css文件才可以，如：

在这里插入图片描述

当你的组件有多个主题时，这样做会比较灵活。但如果你的组件只有一套样式，就可以将该参数置为false，此时所有的样式都会被打包成内联样式，开发者在使用的时候就不需要单独引入样式文件了。这里我们暂且只提供一个主题，因此将extract置为false。

3. 新建packages文件夹

一般来说，我们会在src目录下编写本地组件，然后在其他组件中进行调用。但是我们现在要编写的需要上传到npm的第三方组件，我们不希望它和项目的其他代码混在一起（这样不利于打包），因此我们将新建一个packages文件夹来存放这个组件。

4. 编写插件

我们先按照常规开发组件的方式开发好组件，这与直接在src下编写插件没有什么差别：

<template>
  ...  // 模板
</template>

<script>
  ...  // 脚本代码
</script>

<style>
  ...  // 样式
</style>

注意：我们不止可以向npm上传单个组件，也可以上传一个组件库，这时packages下面可能包含多个vue组件。

开发完插件后，在packages目录下新建index.js，作为组件的入口文件。
(1). 开发单个组件
如果只需要上传单个组件（如本项目），index.js代码如下

// 导入组件
import selectshow from './selectShow/index'; 

let plugin = {};
plugin.install = function( Vue ){
    Vue.component(selectshow.name, selectshow); // 注册组件
}

// 当使用Vue.use(plugin)安装插件时，
// 实际上就是在调用这里暴露出的对象的
// install方法，因此务必确保这里带有install方法
export default plugin;

组件的索引文件暴露出了一个plugin对象，该对象有一个install方法，当调用Vue.use()安装组件时，实际上就是在调用这个方法。因此你可以像下面这样使用selectshow：


// 引入组件暴露出的plugin对象
import selectshow from 'selectShow';

// 执行plugin的install方法
Vue.use(selectshow);

请注意，即使组件不是从npm下载的，你也可以调用Vue.use()，只要传入的对象有install方法。

(2). 开发组件库
如果你要上传一个组件库，可以像下面一样编写index.js：

import ... from ''
import ... from '';
...   // 将所有的组件引入进来

const components = [...]; // 将上述组件保存到一个数组

// 定义install方法，它将作为export暴露的对象的方法被Vue.use调用
const install = function(Vue){
	// 判断当前组件是否已被安装过，如果已安装过则不再安装
    if(install.installed) return;  
    install.installed = true;
    
    // 遍历components数组，依次注册每个组件
    components.map(component => {
        Vue.component(component.name, component);
    }) 
}

if(typeof window !== 'undefined' && window.Vue){
    install(window.Vue);
}
export default{
    install,
    ...components    //将插件暴露出去，这样可以按需引入
} 
// 如果只需要部分组件，请使用import {button} from '';
// Vue.component(Button)的语法手动注册组件
// 这样便可以实现按需引入

项目中引入组件库的方式与引入单个组件是一致的。

5. 测试组件

编写完组件后，需要先进行测试，排除组件的bug后才能上传到npm服务器。我们仍然按照常规的方式，在src文件夹下编写项目代码，引入packages下面的组件进行测试（我们有时也会把src文件夹改为test，表示这是测试组件用的）。

与常规引入组件的方式是一致的，只是路径是packages文件夹。

6. 配置package.json

这一步是为测试和打包做准备，我们在原package.json的顶部添加如下代码：
package.json：


  "name": "selectShow",  
  "version": "0.1.0",  
  "description": "selectShow",  
  "main": "lib/vue-selectShow.umd.min",  
  "private": false,  
  "author": "zuo_jianxia",
  "license": "MIT",
  "style": "lib/vue-selectShow.css", 
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "package": "vue-cli-service build --target lib ./src/packages/index.js --name selectShow --dest selectShow "
  },
  // 下面的配置都是自动生成的，不用动
  "dependencies": {
    ... 
  },
  "devDependencies": {
	... 
  },
  ...

lib 写法注意：

--target lib 后面对应是是打包入口文件

--name 对应是是目录文件夹名字

--dest 对应是打包之后包名

"lib": "vue-cli-service build --target lib ./src/packages/index.js --name selectshow --dest vue-selectShow "

这里需要特别注意的是，要将组件上传到npm上，private参数必须置为false。

另外，如果之前配置vue.config.js时选择生成单独的css文件，则这里的style参数是必须的（否则会找不到样式文件），如果没有单独的css文件，这个参数可以省略。

这里最重要的是scripts内的lib命令，调用它可以将模块打包，只有打完包，才能上传到npm服务器。我们来分析一下各个参数的含义：

vue-cli-service build  // 调用vue-cli提供的build命令
--target lib // 打包目标是package.json同级目录下的lib文件夹（打包时会自动创建）
--name vue-img-container // 包名
--dest lib packages/index.js // 打包入口是packages文件夹下的index.js