npm 组件开发实践

前言

本文涉及内容

• .npmrc 的做用及配置
• npm 组件发布时的命令

.npmrc 的做用

当咱们平常开发中，须要安装对应的依赖包的时候，依赖包从哪里安装呢？.npmrc 能够配置依赖包从哪里安装，也能够配置 npm 的一些别的配置。

.npmrc 配置文件优先级

• 项目配置文件: /project/.npmrc

• 用户配置文件：~/.npmrc

• 全局配置文件：/usr/local/etc/npmrc

• npm 内置配置文件 /path/to/npm/npmrc

项目下 .npmrc 文件的优先级最高，能够每一个项目配置不一样的镜像，项目之间的配置互不影响。

npm config set <key> <value> [-g|--global]  //给配置参数key设置值为value；
npm config get <key>                        //获取配置参数key的值；
npm config delete <key>  [-g|--global]      //删除置参数key及其值；
npm config list [-l]      		    //显示npm的全部配置参数的信息；
npm config edit     			    //编辑用户配置文件
npm get <key>  		                    //获取配置参数 key 生效的值；
npm set <key> <value> [-g|--global]         //给配置参数key设置值为value；
复制代码

没有加 -g 配置的是用户配置文件

-g 会配置到全局配置文件

npm 组件发布流程

申请帐号

官网申请一个帐号，用于登陆和发布组件。

在项目的根路径下建立 .npmrc 配置文件，添加以下内容。

# 安装包的时候，配置阿里镜像
# registry = https://registry.npm.taobao.org

# 发布开发的组件使用
registry=https://registry.npmjs.com/
复制代码

添加申请的 npm 帐户 npm adduser

# npm adduser [--registry=url] [--scope=@orgname] [--always-auth] [--auth-type=legacy]

npm adduser  --scope=@thingjs-ad --registry=https://registry.npmjs.com/
复制代码

运行上述命令，.npmrc 用户配置文件生成一下内容

@thingjs-ad:registry=https://registry.npmjs.com/
//registry.npmjs.com/:_authToken=xxx
复制代码

--scope 是包的命名空间，好比说：@babel/xxx @vue/xxx, xxx 能够相同，可是包的命名空间不同。这样也便于维护。@vue 下有不少的 npm 包。

发布组件

npm publish --access=public
复制代码

npm 组件开发实战

初始化 package.json

npm init --scope=thingjs-ad
复制代码

生成 package.json 内容以下

{
    "name": "@thingjs-ad/thingjs-app",
    "version": "0.1.1",
    "private": false,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build --target lib --name thingjs-app ./src/index.js",
        "lint": "vue-cli-service lint",
        "pub": "npm run build && npm publish --access=public"
    },
    "main": "dist/thingjs-app.umd.min.js",
    "files": [
        "src",
        "dist"
    ],
    "devDependencies": {
        "@vue/cli-plugin-babel": "^4.2.0",
        "@vue/cli-plugin-eslint": "^4.2.0",
        "@vue/cli-service": "^4.2.0",
        "babel-eslint": "^10.0.3",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.1.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"
    ]
}
复制代码

添加用户

npm adduser  --scope=@thingjs-ad --registry=https://registry.npmjs.com/
复制代码

发布组件

npm publish --access=public
复制代码

为了兼容性，还需集成 babel 和 webpack 。这样输出的代码能够兼容更多的浏览器。

Vue 组件开发发布

使用 vue cli 初始化项目。而后开发一个组件。

AA.vue

<template>
     <div>
         AA 组件
     </div>
</template>
<script>
export default {
    name:'AA'
};
</script>
复制代码

index.js

import AA from './components/AA.vue';

const components = [AA];


// 当调用 Vue.use,实际会调用这个 install 方法。Vue.component 注册全局组件。

const install = function (Vue) {
    components.forEach(component => {
        Vue.component(component.name, component);
    });
};

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    version: '1.0.0',
    install,
    AA
}
复制代码

package.json

name : 注意命名，@thingjs-ad/thingjs-app @thingjs-ad 为依赖包命名空间 scope。

version:版本号，每次 npm publish 须要更改版本号

private : 要配置 false,私有库不容许发布的。

main: 指定安装依赖包的加载的js dist/thingjs-app.umd.min.js

files: 指定发布的依赖包，包含的文件，默认会忽略一些文件。也能够根目录下建立 .npmignore 忽略一些文件。

scripts : 指定构建的脚本。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name thingjs-app ./src/index.js",
    "lint": "vue-cli-service lint",
    "pub": "npm run build && npm publish --access=public"
},
复制代码

vue-cli-service build --target lib --name <依赖包文件名> 用于构建生成。

npm run pub 发布组件。