require引入js vue_手把手教你撸一个属于你的 Vue 组件库

作者：falost
地址： https:// falost.cc/article/5de3a 11a5b7bf34a057353d3
生命不止，折腾不止，技术的成长在于爬坑的多少！ ——— 我说的

好久不见，甚是想念！

前言

在日常工作中，我们经常会使用别人开发的组件，比如：element、iView、Mint、Ant Design Vue 等 UI 组件库。 使我们的开发效率提升数倍（别人写好的，拿来就用）平常我们也会开发一些好用的组件，以供自己的项目使用，但都是自己通过相对或绝对路径引入使用的，那么我们如何做到像上面的组件库一样，可以通过下面的几种方式引用呢：

import Fui from 'fui'
const Fui = require('fui')

或CND引入

<script src="../fui.js"></script>
Vue.use(Fui)

或多个组件按需加载，减少项目体积,需要借助 babel-plugin-component

import {
     Banner, Search } from 'fui'
Vue.component(Banner.name, Banner)
Vue.component(Search.name, Search)

代码实现

我们需要构建一个 vue 的项目，我们可以使用 vue 的脚手架提供的模版 webpack-simple 来完成

vue init webpack-simple <project-name>

在生成了我们所需要的项目基础构建后，我们先来了解下项目目录结构

├── README.md
├── build
│   ├── config.js // 公共 js 配置
│   ├── utils.js
│   ├── vue-loader.conf.js // vue-loader 配置文件
│   ├── webpack.common.js // 全局打包配置
│   ├── webpack.component.js // 单个文件打包配置
│   ├── webpack.config.js // 开发运行配置
│   └── webpack.fui.js // 全局样式基础配置
├── components.json // 所有组件的清单文件
├── dist // 打包生成存放目录
├── example // cdn 引入案例展示目录
│   └── index.html
├── index.html // 入口文件
├── package.json
├── packages // 组件库
├   ├──index.js // 所有组件的入口
│   └── search // 单个组件的存放目录
│       ├── index.js // 组件的入口文件
│       └── src // 组件实现代码目录
│           └── main.vue // 组件模版文件
├── src
│   ├── App.vue
│   ├── assets
│   ├── main.js
│   ├── mixins
│   │   └── datas.js // 为单个组件生成基础数据所使用的
│   ├── scss // 样式配置目录
│   │   ├── _common-style-color.scss
│   │   ├── _common-style.scss
│   │   ├── _common_fun.scss
│   │   ├── _mixins.scss
│   │   ├── fui.scss
│   │   └── index.js
│   └── utils // 公共代码库
│       ├── md5.js
│       ├── session.js
│       └── tools.js
└── types // typescrip 声明文件目录
    ├── component.d.ts
    ├── components
    │   └── banner.d.ts
    ├── fui.d.ts
    └── index.d.ts

这里，我对脚手架生成的结构做了调整，增加了 build 目录，专门来放置打包脚本的

另外这里只需要重点关注下打包脚本和 package 目录即可。 下面的配置，我沿用了些之前项目的配置

来看看脚手架的内容吧,我就直接贴代码了！

先看下开发模式配置所需要的

build/webpack.config.js

/*
 * @Descripttion: webpack 配置文件
 * @version:  1.0.0
 * @Author: falost
 * @Date: 2019-10-17 15:34:22
 * @LastEditors: falost
 * @LastEditTime: 2019-10-22 19:50:37
 */
const path = require('path')
const webpack = require('webpack')
const Components = require('../components.json')

const utils = require('./utils')
const config = require('./config')
const vueLoaderConfig = require('./vue-loader.conf')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const NODE_ENV = process.env.NODE_ENV
function resolve (dir) {
    
  return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
    
  test: /.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})
module.exports = {
    
  context: path.resolve(__dirname, '../'),
  entry: NODE_ENV == 'development' ? './src/main.js' : Components,
  output: {
    
    path: path.resolve(process.cwd(), './dist'),
    publicPath: NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
    filename: NODE_ENV =&