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 發佈組件。