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 发布组件。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章