libinput

Npm pushlish a package process

Build publish environment

• Init a webpack simple demo

Developer components

• lib/input/index.vue 文件

    <template>
      <div id="app">
        姓名：<input
          v-model="inputValue"
          type="text"
          @change="changeValue"
        >
      </div>
    </template>
    
    <script>
    export default {
      name: 'libInput',
      props: {
        inputVal: {
          type: String,
          default: ''
        }
      },
      data () {
        return {
          inputValue: this.inputVal
        }
      },
      methods: {
        changeValue () {
          this.$emit('changeValue', this.inputValue);
        }
      }
    }
    </script>
  

• lib/index.js 文件

    import libInput from "./input"
    export default libInput

• Modify package.json [packaged file path]

    {
      "name": "libinput",
      "description": "lib input plugin",
      "version": "3.2.2",
      "author": "刘慧涛 <liuht@mti-sh.cn>",
      "license": "MIT",
      "private": false,
      "main": "dist/libinput.min.js",  //必须添加内容
      "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
      },
      ...
    }
  

• Modify webpack.config.js ['lib/index.js'：export publish component]

    var path = require("path")
    var webpack = require("webpack")
    
    module.exports = {
      entry: "./src/lib/index.js",
      // entry: "./src/main.js",
      output: {
        path: path.resolve(__dirname, "./dist"),
        publicPath: "/dist/",
        filename: "libinput.min.js",
        // library: "libinput", // library指定的就是你使用require时的模块名，这里便是require("toastPanel")
        libraryTarget: "umd", //libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
        umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
      },
      // 这里我们可以剔除掉一些通用包,自己的包不打包这些类库,需要用户环境来提供
     ...
    }

Publish package

npm whoam  //查看登录账户
npm publish  //发布包

How use [In new project]

npm install libinput(package name) --save

TestComponent.js:
<template>
  <div id="app">
    <lib-input
      :inputVal="input"
      @changeValue="changeValue"
    ></lib-input>
  </div>
</template>

<script>
import libInput from 'libinput'
export default {
  name: 'app',
  components: {
    libInput
  },
  data () {
    return {
      input: 'xxxx'
    }
  },
  methods: {
    changeValue (val) {
      // eslint-disable-next-line no-console
      console.log(val)
    }
  }
}
</script>