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

前言

专业成都网站建设公司，做排名好的好网站，排在同行前面，为您带来客户和效益!成都创新互联为您提供成都网站建设，五站合一网站设计制作，服务好的网站设计公司，成都网站设计、网站建设负责任的成都网站制作公司!

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

第一步，安装webpack简易框架

 
 
 
 
  
  
  
  vue init webpack-simple marquee

第二步，封装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插件了

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
    .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;   
  
  
    }

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

5、启动命令，查看效果

 
 
 
 
  
  
  
  npm install   
  
  
  npm run dev

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

1、编辑marquee文件夹下的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

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查看说明

第四步，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 );

在页面使用

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 publis

 
 
 
 
  
  
  
  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发布包以及更新包还有需要注意的几点问题（这里以发布vue插件为例）
新闻来源：http://www.36103.cn/qtweb/news24/3974.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容