组件封装之将代码放到npm上

　　想必大家有过这种烦恼，同一个方法，新项目用的时候还得去找之前写过的代码，不仅耗时，而且方法有变动之后，还得将之前的老方法替换掉。如果将封装的方法放到npm上，要用的时候安装一下，就可以省下很多时间和精力，如果你也有这种困惑，希望本文能帮助到你。

　　一、注册npm账号

　　发布代码前得注册一个npm账号，这样才能进行发布操作。通过npm官网注册，如图1所示。

图1 npm官网注册图

　　注册完毕后，注意查看邮箱，需要进行验证，通过验证才可进行发布操作。敲破黑板，这点很重要。

　　二、创建项目

　　项目分为三个部分，分别是封装的组件、入口文件和配置文件。

　　组件即你要上传的代码，就不细说了。index.js将export出去你的组件，是组件和package.json连接的桥梁。至于pakeage.json，它不仅仅是用来标明依赖和npm script脚本，也可以是一个npm包被外界识别的配置文件。

　　项目结构如图2所示。

图2 项目结构图

 　　changeTime.js代码如下：

let changeTime = {
    ChangeTime(time, status) {
        var changetime = new Date(time);

        var year = changetime.getFullYear();
        var month = changetime.getMonth();
        var day = changetime.getDate();
        var hour = changetime.getHours();
        var minutes = changetime.getMinutes();
        var seconds = changetime.getSeconds();

        var datetime = '';
        if (status == 'YMD') {
            datetime = year + '-' + (month + 1) + '-' + day;
        } else {
            datetime = year + '-' + (month + 1) + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
        }

        return datetime
    },
    ChangeTime1() {
    },
    ChangeTime2() {
    }
}
export default changeTime

　　index.js代码如下：

import changeTime from './changeTime.js'

export default changeTime

　　至于package.json，你可以使用我在下方贴出来的代码，也可以自己初始化一个，建议初始化一个，这样印象深刻（拒绝白嫖，自己去创建）。

　　在文件夹地址栏中运行cmd，打开命令行面板，输入：

npm init

　　效果如图3所示。

 图3 初始化package.json文件

　　就知道你要白嫖，我把我的也放出来吧。 　　

package.json代码如下：

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "时间转换组件",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xxx",
  "license": "ISC"
}

　　这是我的配置文件，内容更全面，其实也是当初我百度的。

　　沈腾式承认：不装了，我摊牌咧。

　　package.json代码如下：

{
  "name": "xxx",
  "version": "1.0.1",
  "description": "公共功能的js",
  "main": "index.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "author": "xxx",
  "license": "ISC",
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

　　三、发布代码

　　终于，激动人心的时刻来了，喝桶水继续~

　　命令行输入

npm adduser

　　账号、密码、邮箱填写的都是在npm官网注册的信息。温馨提示：输入密码时是看不到的，不要怀疑电脑坏了，也不要怀疑人生。效果如图4所示。

图4 登录账号图

 　　接下来输入npm publish即可进行发布：

npm publish

　　效果如图5所示：

 图5 发布成功图

　　如果发布失败，一般有这几种问题：如当前登陆人和配置文件里的登陆人不一致、版本号问题、配置文件里的name重复等。具体报错请出门右转打开百度。

 　　四、下载验证

　　伟人说：实践是检验真理的唯一标准。组件是否发布成功，得看下载引用才能得出结论。

　　在vue项目里下载依赖：

npm install changetime_test --save

　　在main.js里引用：

import changeTime from 'changetime_test'

console.log('--查看时间组件--', changeTime.ChangeTime(new Date()))

　　效果如图6所示：

 

图6 引用组件图

　　至此，将代码发布到npm的流程就告一段落了。

　　五、常见报错

　　下面是一些常见报错：

• npm publish failed put 500 unexpected status code 401
  一般是没有登录，重新登录一下 npm login 即可

• npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
  包名被占用，改个包名即可。最好在官网查一下是否有包名被占用，之后再重命名

• you must verify your email before publishing a new package
  邮箱未验证，去官网验证一下邮箱

　　六、结语

　　至此全文结束，本文讲的是对方法组件的发布，后续文章会出讲述布html组件，敬请期待。

　　原创不易，一键三连支持一下。

　　转载请标明出处~