前言：谈及前端工程化，不少coder都心底有点恐慌。他的范围实在是太广了，从模块化开发到自动化构建，从自动化测试到自动化部署，以及各种各样的规范。细到webpack数不清的loader和plugins，脚手架搭建，ui库搭建，以及文档的书写都是属于前端工程化的范畴。本文就从其中的vue的指令着手，手把手教你从零开发一个指令库，并且实现npm的发布与使用。阅读本文后，相信你也会对前端工程化更有兴趣，能够自己去做属于你自己的工程化建设。这也是前端进阶不可或缺的能力。好了，闲话不多说，下面开始教程。 在开始本文之前，先奉上笔者自己写的指令库，可以先了解一下。

指令库开箱即用

开发

首先创建一个vue项目：

vue create ***

此时的文件的结构如下：

讲述指令库的开发                    
└─ directive_vue            
   ├─ public                
   │  ├─ favicon.ico        
   │  └─ index.html         
   ├─ src                   
   │  ├─ assets             
   │  │  └─ logo.png        
   │  ├─ components         
   │  │  └─ HelloWorld.vue  
   │  ├─ App.vue            
   │  └─ main.js            
   ├─ babel.config.js       
   ├─ jsconfig.json         
   ├─ package.json          
   ├─ README.md             
   ├─ vue.config.js         
   └─ yarn.lock             

在src目录下创建plugins文件用来保存我们所写的指令文件 在plugins里创建directives文件夹保存我们的指令，同时创建index.js来统一管理所有的指令：

讲述指令库的开发                         
└─ directive_vue                 
   ├─ public                     
   │  ├─ favicon.ico             
   │  └─ index.html              
   ├─ src                        
   │  ├─ assets                  
   │  │  └─ logo.png             
   │  ├─ components              
   │  │  └─ HelloWorld.vue       
   │  ├─ plugins                 
   │  │  ├─ directives           
   │  │  │  ├─ backGround.js     
   │  │  │  ├─ click-outside.js  
   │  │  │  ├─ debounce.js       
   │  │  │  ├─ draggable.js      
   │  │  │  ├─ ellipsis.js       
   │  │  │  ├─ facus.js          
   │  │  │  ├─ mask.js           
   │  │  │  ├─ resize.js         
   │  │  │  ├─ scroll.js         
   │  │  │  ├─ throttle.js       
   │  │  │  └─ tooltip.js        
   │  │  └─ index.js             
   │  ├─ App.vue                 
   │  └─ main.js                 
   ├─ babel.config.js            
   ├─ jsconfig.json              
   ├─ package.json               
   ├─ README.md                  
   ├─ vue.config.js              
   └─ yarn.lock                  

这里就以一个简单的指令作为讲解案例，以v-backGround指令为案例： 编辑backGround.js文件：

// 改变背景颜色
// author:DGT 
export default {
    bind: function(el, binding) {
        el.style.backgroundColor = binding.value;
      }
}

这个指令非常简单，修改元素的背景颜色。其他的指令也统一都按照这种形式进行书写。 例如：v-draggable拖拽指令：

// 实现元素拖拽
export default {
    bind: function (el) {
      el.style.position = 'absolute';
      el.addEventListener('mousedown', function (event) {
        el.style.cursor = 'pointer';
        const startX = event.clientX
        const startY = event.clientY
        const left = el.offsetLeft
        const top = el.offsetTop
        document.addEventListener('mousemove', move)
        document.addEventListener('mouseup', stop)
        function move(event) {
          el.style.left = left + event.clientX - startX + 'px'
          el.style.top = top + event.clientY - startY + 'px'
        }
        function stop() {
          document.removeEventListener('mousemove', move)
          document.removeEventListener('mouseup', stop)
          el.style.cursor = 'default';
        }
      })
    }
  };
  

其他的大家自己补充，也可以参考我写好的指令库的内容，也是上面的那个链接：

接下来进行编辑index.js对指令直径统一的引入管理：

const requireDirective = require.context('./directives', true, /.js$/);
const directives = {}
requireDirective.keys().forEach(fileName => {
  const directiveName = fileName.replace(/\.\/(.*)\.js$/, '$1')
  directives[directiveName] = requireDirective(fileName).default
})
const install = (Vue) => {
  
for(let i in directives){
    Vue.directive(i, directives[i]);
}
}
// 环境检测
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install
}

大概的意思就是：读取当前路径的directives目录下的所有js文件，进行文件的遍历，取文件名作为指令的名称，export一个install函数，函数的参数是Vue，这个是作为插件使用的固定写法。 我们先检验一下在本地项目是否能够使用这些指令，编辑main.js引入我们的指令插件，并进行使用：

import installs from './plugins/index'
Vue.use(installs)

接下来在我们的项目的任何地方都能够使用了：

 <div class="hello">
    <h1 v-draggable>测试拖拽</h1>
    <div class="testEllipsis" v-ellipsis >测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出</div>
  </div>

发布

现在进行指令库的发布配置：

在项目根目录下创建一个lib文件夹，用来保存我们的打包后的源码：

现在编辑我们的package.json:

{
  "name": "dgt-directives",
  "version": "0.2.6",
  "private": false,
  "license": "MIT",
  "main": "lib/dgt-directives.umd.min.js",
  "description": "修改文本溢出指令",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name dgt-directives --dest lib src/plugins/index.js"
  },
  ...
}

创建一个新的命令，lib命令,命令指定打包后文件的存放路径为当前目录下的lib文件夹，指定名称为你的指令库名称这个随意指定你自己的名称就行了，以及要执行的目标js。 接下来在终端执行，进行打包。

npm run lib

打包成功后会在lib文件夹下生成打包好的文件：

lib                               
├─ demo.html                      
├─ dgt-directives.common.js       
├─ dgt-directives.common.js.map   
├─ dgt-directives.umd.js          
├─ dgt-directives.umd.js.map      
├─ dgt-directives.umd.min.js      
└─ dgt-directives.umd.min.js.map  

现在继续编辑我们的package.json，添加main属性，属性值指向生成的***.umd.min.js文件，一定要是这个文件。同时修改：

  "name": "dgt-directives",
  "version": "0.2.6",
  "private": false,
  

指定版本号，公开发布，和插件的名称，注意这里的name一定要跟 "lib": "vue-cli-service build --target lib --name dgt-directives --dest lib src/plugins/index.js"中指定的name保持一致。

至此我们的发布准备工作已经就绪了。

接下来就是常规的npm发布流程：

终端执行：

npm login // 登录你的npm账号，如果没有可以先去npm官网进行注册，这里就不介绍注册流程了

然后执行：

npm publish // 每次发布前需要手动修改package.json里面的版本号，要与已有的版本号不同，不然会导致发布不成功

然后登陆上你自己npm网站就会发现已经发布成功了，使用也很简单。

在项目中只需要安装依赖，并且和其他插件一样引入就行了：

npm install dgt-directives -S

main.js:

import myDrectives from 'dgt-directives'
Vue.use(myDrectives)

然后就可以随意使用已有的指令了，是不是很简单？ 本文到此就结束了，今后也会继续更新有关前端工程化相关的文章。