npm发布包以及更新包还有需要注意的几点问题（这里以发布vue插件为例）

亦凉 2021-08-13 12:38 343阅读 0赞

## 前言 ##

在此之前，你需要去[npm官网][npm]注册一个属于自己的账号，记住自己的账户名以及密码、邮箱，后面会用的到。

## 第一步，安装webpack简易框架 ##

vue init webpack-simple marquee

> 这里会用到`vue init` 命令，如果你的`cli`版本是3或者以上，那么在此之前你需要安装`vue/cli-init`
> 
> --------------------
> 
> `npm install -g @vue/cli-init`
> 
> --------------------
> 
> `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

## 第二步，封装Vue插件 ##

### 1、安装完成后，会出现以下目录即可成功 ###

marquee/
    ├── index.html
    ├── package.json
    ├── README.md
    ├── .babelrc
    ├── .editorconfig
    ├── .gitignore
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    └── webpack.config.js

### 2、接下来，我们在`src文件夹`下创建一个名叫`marquee的文件夹`，在文件夹里面创建`marquee.vue`和`index.js` ###

marquee/
    ├── index.html
    ├── package.json
    ├── README.md
    ├── .babelrc
    ├── .editorconfig
    ├── .gitignore
    ├── src
    │   ├── App.vue
    │   ├── marquee
    │   │   └── marquee.vue
    │   │   └── index.js
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    └── webpack.config.js

### 3、开始在`marquee.vue`封装Vue插件了 ###

<template>
      <div class="marquee-wrap">
        
        <div class="scroll">
          <p class="marquee">{
       {text}}</p>
          
          <p class="copy"></p>
        </div>
        
        <p class="getWidth">{
       {text}}</p>
      </div>
    </template>
    
    <script> export default { name: 'marquee', props: ['val'], data () { return { timer: null, text: '' } }, created () { let timer = setTimeout(() => { this.move() clearTimeout(timer) }, 1000) }, // 把父组件传入的arr转化成字符串 mounted () { for (let item of this.val) { this.text += ' ' + item } }, methods: { move () { let maxWidth = document.querySelector('.marquee-wrap').clientWidth // 获取文字text 的计算后宽度 （由于overflow的存在，直接获取不到，需要独立的node计算） let width = document.querySelector('.getWidth').scrollWidth // 如果文本内容的宽度小于页面宽度，则表示文字小于等于一行，则不需要滚动 if (width <= maxWidth) return let scroll = document.querySelector('.scroll') let copy = document.querySelector('.copy') copy.innerText = this.text // 文字副本填充 let distance = 0 // 位移距离 // 设置位移 this.timer = setInterval(() => { distance -= 1 // 如果位移超过文字宽度，则回到起点 if (-distance >= width) { distance = 16 // 距离必须与marquee的margin宽度相同 } scroll.style.transform = 'translateX(' + distance + 'px)' }, 20) } }, beforeDestroy () { // 清除计时器 clearInterval(this.timer) } } </script>
    
    <style scoped> .marquee-wrap { width: 100%; overflow: hidden; position: relative; } .marquee{ margin-right: 16px; } p { word-break:keep-all; white-space: nowrap; font-size: 16px; font-family: "微软雅黑 Light"; } .scroll { display: flex; } .getWidth { word-break:keep-all; white-space:nowrap; position: absolute; opacity: 0; top: 0; } </style>

### 4、为了方便查看效果，可以在App.vue先引入组件查看效果 ###

<template>
      <div id="app">
           <Marquee :val="msg"></Marquee>
      </div>
    </template>
    
    <script> import Marquee from '../src/marquee/marquee.vue'; export default { name: 'app', data () { return { msg: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' } }, components:{ Marquee } } </script>
    
    <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

### 5、启动命令，查看效果 ###

npm install
    npm run dev

## 第三步，发布Vue插件前配置 ##

### 1、编辑`marquee文件夹`下的`index.js` ###

index.js

// index.js
    
    // 引入组件
    import marquee from './marquee';
    // 组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
    marquee.install = Vue => Vue.component(marquee.name, marquee); //注册组件
    
    export default marquee;

### 2、修改`webpack.config.js` ###

const NODE_ENV = process.env.NODE_ENV;
    module.exports = { 
      entry: NODE_ENV == 'development' ? './src/main.js' : './src/marquee/index.js',
      output: { 
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'marquee.js', //输出文件名
        library: 'marquee', // 指定的就是你使用require时的模块名
        libraryTarget: 'umd', // 指定输出格式， UMD 同时支持两种执行环境：node环境、浏览器环境。
        umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
      },
    }

### 3、打包 ###

npm run build

如果成功的话，根目录下会出现`dist文件夹`，里面分别是`marquee.js`和`marquee.js.map`

marquee/
    ├── dist
    │   ├── marquee.js
    │   ├── marquee.js.map
    ├── index.html
    ├── package.json
    ├── README.md
    ├── .babelrc
    ├── .editorconfig
    ├── .gitignore
    ├── src
    │   ├── App.vue
    │   ├── marquee
    │   │   └── marquee.vue
    │   │   └── index.js
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    └── webpack.config.js

### 4、修改`package.json` ###

{ 
     "author": "maomincoding", 
      "main": "dist/marquee.js",
      "license": "ISC",
      "keywords": ["marquee"],
      "private": false,
    }

`author`的值为`npm用户名`，这里一定要注意。  
`main`的值为你刚才打包的路径文件  
`license`的值按照以上即可  
`keywords`为用户搜索的关键词  
`private`设为`false`, 开源因此需要将这个字段改为 false

### 5、修改`.gitignore` ###

可以 删除 `dist/`字段，提交的时候一并上传上去。

.DS_Store
    node_modules/
    dist/    
    npm-debug.log
    yarn-error.log
    
    # Editor directories and files
    .idea
    *.suo
    *.ntvs*
    *.njsproj
    *.sln

### 6、编辑`README.md` ###

这是你上传之后的自述文件，可以在网页上显示，用的也是md语法，这里就不显示代码了，来张网页图示范，也可以直接去[marquee][]查看说明  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

## 第四步，npm包发布 ##

### 1、在此之前，你一定要注意先查看登录源，切换到根目录下`marquee/` ###

npm config get registry

> 如果是 https://registry.npm.taobao.org  
> 那么，输入以下命令，切换到http://registry.npmjs.org

npm config set registry=http://registry.npmjs.org

切换淘宝源

npm config set registry=https://registry.npm.taobao.org

### 2、登录，输入命令 ###

npm login

> 相继输入用户名、密码、邮箱。  
> 回车出现 `Logged in as maomincoding on http://registry.npmjs.org`,那么就登陆成功了

3、上传发布

npm publish

## 第五步，插件下载使用 ##

> 替代marquee标签的文字横向滚动Vue插件

### 1、安装 ###

# install dependencies
    npm i marquee-components

### 2、使用 ###

在main.js引入

import marquee from 'marquee-components'
    Vue.use(marquee );

在页面使用

<template>
      <div id="app">
           <marquee :val="msg"></marquee>
      </div>
    </template>
    <script> export default { name: 'app', data () { return { msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue' } } } </script>

`val`后加文字即可，当超过文本容器长度时，触动横向滚动效果。

## 第六步，npm包更新和撤销 ##

### 1、撤销包 ###

当你想撤销上传的包时，你可以看看下面的说明：  
撤销的坏处：

*  1、根据规范，只有在发包的24小时内才允许撤销发布的包。
 *  2、即使你撤销了发布的包，发包的时候也不能再和被撤销的包的名称和版本重复了（即不能名称相同，版本相同，因为这两者构成的唯一标识已经被“占用”了）
 *  3、这里要说一点，取消发布包可能并不像你想象得那么容易，这种操作是受到诸多限制的，撤销发布的包被认为是一种不好的行为（试想一下你撤销了发布的包\[假设它已经在社区内有了一定程度的影响\]，这对那些已经深度使用并依赖你发布的包的团队是件多么崩溃的事情！）

所以，**慎行！！！**

撤销命令：

npm unpublish 包名 --force

送给你一句官方说的话

I sure hope you know what you are doing

### 2、更新包 ###

看到了撤销的坏处，所以我推荐你更新包。  
更新包很简单，只需两步：

#### （1）、打开根目录下的`package.json`找到`version`字段 ####

具体体现为：  
`"version":"a.b.c"`

> 1.修复bug,小改动，c加1  
> 2.增加了新特性，但仍能向后兼容，b加1  
> 3.有很大的改动，无法向后兼容，a加1

#### （2）、根目录下输入`npm publish` ####

npm publish

## 结语 ##

这里是以发布Vue插件为例，你也可以单独发布一个包。

1、输入命令

npm init

根据自己的情况输入然后回车，会自动生成一个`package.json`文件

{ 
      "name": "vue-cli-configjs",
      "version": "2.0.0",
      "description": "vue.config.js by vue-cli3+",
      "main": "vue.config.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [
        "vue-cli-config"
      ],
      "author": "maomincoding",
      "license": "ISC"
    }

2、然后建一个`readme.md`自述文件，用于说明

3、最后发布即可

npm publish

[npm]: https://www.npmjs.com/
[marquee]: https://www.npmjs.com/package/marquee-components
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20210813/d89b104ae95243ba94052b11619a76f0.png