创建vue组件库并发布到npm

创建vue组件库

例子中我们采用webpack来构建自己的工程

创建package.json文件，加入需要引用的依赖包

{
  "name": "xxxx",
  "description": "xxxx",
  "version": "1.0.0-beta.3",
  "author": "Tinylj([email protected])",
  "license": "MIT",
  "private": false,
  "main": "dist/xxx.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config build/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.js"
  },
  "dependencies": {
    "vue": "^2.5.11",
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.11",
    "style-loader": "^0.23.1",
    "file-loader": "^1.1.4",
    "less": "^2.7.3",
    "less-loader": "^4.1.0",
    "url-loader": "^1.1.2",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "files": [
    "dist"
  ]
}
复制代码

version中是我们需要发布到npm的版本号。 files中是我们需要上传到npm的文件夹目录，如果我们不想开源，则只需要上传webpack打包之后的dist文件夹 配置对应的webpack.common.js,webpack.dev.js以及webpack.prod.js，这里webpack的知识点就不详细展开了。 随后在src文件夹中和我们平常书写一个vue组件一样。

书写一个组件，并输出他

创建一个组件，这个组件是一个定制化的Input输入框，支持各种属性的变化，事件，状态等。src/packages/input/src/main.vue

复制代码

输出这个main.vue文件 src/packages/input/index.js

import lhInput from './src/main.vue';

/* istanbul ignore next */
lhInput.install = function(Vue) {
  Vue.component(lhInput.name, lhInput);
};
export default lhInput;
复制代码

支持npm install 以及构建npm build指向的inde.js

src根目录下创建src/index.js

import lhInput from './packages/input/index';
const components = [
  lhInput,
  // ...如果还有的话继续添加
]
const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component);
  })
}
/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  lhInput,
}
复制代码

经过以上几个步骤，我们已经简单的构建了一个可以发布到npm并支持标签引用的webpack+vue工程。 发布到npm之后，可以被其他工程引入，刚才的input组件也可以直接以 的方式直接引用到工程里。

延伸阅读 如何对组件库进行调试

我们大概率不会每次调试组件都把组件再发布到npm用其他工程引用的方式来调试，而是本地webpack-dev-server来启动。 那么我们则需要把npm run dev 和 npm run build分开。

src根目录下创建src/main.js 使用npm run dev指向这个入口文件。

import Vue from 'vue';
import App from './App.vue';
// import 'babel-polyfill';
import router from './router';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import '../static/css/theme-common/main.less';
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

复制代码

延伸阅读 如何构建主题包

没人看，下次再讲

npm

什么是npm

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 再看一个官网的解释： Essential JavaScript development tools that help you go to market faster and build powerful applications using modern open source code.

如何发布一个自己的npm包

1：创建一个npm的账号

2：npm run build 内容打包到dist文件夹。

3：npm login 登录自己的账号

4：npm publish 发布到npm 上。

作者：嚣张的胖头鱼
链接：https://juejin.im/post/5dda8a39e51d45230747a17e
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。