今年三月份入职以来,一直在做后台运营系统,其中重复性工作有很多,其中组件库就是一项。尽管现阶段有很多优秀的开源组件库,但是为了适应产品奇奇怪怪的需求,还是要手动实现一些组件。将其沉淀下来,积累一些自己东西。
概述:首先基于Vue-cli脚手架改装一个组件库的基本构建工具,它具备以下几点功能:
- webpack3.0 升级 webpack4.0 => 更好地完成组件的开发以及打包工作;
- 支持sass => 加速组件样式开发;
- 支持导入markdown以及markdown样式自定义、以及code高亮;
- 自动配置路由。
2018年12月25日新增
- highlight打包过大,缩减语言包;
- jscpd检查重复代码。
将之前的v-highlight
指令
// 这样加载了highlight所有的代码语言包,有300kb+
import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
hljs.configure({ useBR: true })
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('code')
blocks.forEach(block => {
hljs.highlightBlock(block)
})
})
复制代码
修改为
import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/github.css';
// 只加载Html、JavaScript
import javascript from 'highlight.js/lib/languages/javascript';
import xml from 'highlight.js/lib/languages/xml';
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('xml', xml);
Vue.directive('highlight', function (el) {
let blocks = el.querySelectorAll('code')
Array.prototype.forEach.call(blocks, block => {
hljs.highlightBlock(block)
})
})
复制代码
安装jscpd,npm i --save-dev jscpd
,修改packjson.json
{
....
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
// 添加
"check": "jscpd src",
"build": "node build/build.js"
},
...
}
复制代码
运行结果
1. 实例
实例地址:Fat-Ge UI library
代码地址:UI-Library code
2. 安装流程
环境:win-64位、node-v8.12.0
-
安装
npm install --global vue-cli
安装vue-cli,之后创建一个ui-library的项目
vue init webpack ui-library
创建的项目的package.json中,webpack的版本为3.6.0
"webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" 复制代码
为了升级webpack4.1.2,先把当前webpack以及其相关依赖uninstall
npm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge npm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin vue-loader 复制代码
安装webpack4,由于webpack4依赖webpack-cli,所以也需要安装
npm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge npm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin vue-loader 复制代码
手动替换
extract-text-webpack-plugin
插件npm uninstall -D extract-text-webpack-plugin
替换为npm install -D mini-css-extract-plugin
安装sass相关依赖
npm install -D node-sass sass-loader --save-dev
-
配置
-
首先配置webpack的mode,在webpack.dev.conf.js以及webpack.prod.conf.js中分别加上
const devWebpackConfig = merge(baseWebpackConfig, { mode: 'production', ... }) 复制代码
const webpackConfig = merge(baseWebpackConfig, { mode: 'development', ... }) 复制代码
-
配置webpack.base.conf.js文件
// 引入VueLoaderPlugin const { VueLoaderPlugin } = require('vue-loader') // 添加至 const devWebpackConfig = merge(baseWebpackConfig, { ... plugins: [ new VueLoaderPlugin(), ... ] }) 复制代码
-
配置webpack.prod.conf.js文件
需要删除
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
之后配置config项
const ExtractTextPlugin = require('extract-text-webpack-plugin') const { VueLoaderPlugin } = require('vue-loader') const webpackConfig = merge(baseWebpackConfig, { optimization: { splitChunks: { cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, chunks: 'initial', name: 'vendors', }, 'async-vendors': { test: /[\\/]node_modules[\\/]/, minChunks: 2, chunks: 'async', name: 'async-vendors' } } }, runtimeChunk: { name: 'runtime' } }, plugins: [ // 添加VueLoaderPlugin new VueLoaderPlugin(), ... // 引入MiniCssExtractPlugin new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash:7].css') }), // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // keep module.id stable when vendor modules does not change new webpack.HashedModuleIdsPlugin(), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ] 复制代码
-
修改utils.js
exports.cssLoaders = function(options) { options = options || {} // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { let loaders = [] if (loader) { loaders = [{ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }] } if (options.extract) { let extractLoader = { loader: MiniCssExtractPlugin.loader, options: {} } return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders) } else { return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders) } } return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } } 复制代码
-
引入
sass-resources-loader
处理公共css文件npm install -D sass-resources-loader --save-dev
修改上述
return
的值为{ ... scss: generateLoaders('sass').concat({ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/styles/common.scss') } }) ... } 复制代码
-
3. 支持导入markdown以及markdown样式自定义
由于vue-markdown-loader
与vue-loader版本15有兼容性的问题,所以利用text-loader
将Markdown文档导入并生成String,再编译为markdown文档。
首先npm install -D text-loader
安装text-loader,用来引入*.md文件,再修改webpack.base.conf.js文件,添加text-loader
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /.md$/,
loader: 'text-loader'
},
...
]
复制代码
在引入marked
对导入的String进行编译
<template>
<div class="markdown-body" v-html="compiledMarkdown" v-highlight></div>
</template>
import markdown from '../../README.md'
import marked from 'marked'
export default {
computed: {
markdowonText () {
// 编译markdown
return marked(markdown)
}
}
}
复制代码
觉得markdown的样式有些丑,可以导入github-markdown-css
npm install -D github-markdown-css
对样式进行修改。如果markdown中存在着某些code,可以通过highlight
进行高亮展示
npm install -D highlight
import hljs from 'highlight.js'
// 调整高亮code的样式
import 'highlight.js/styles/vs2015.css'
hljs.configure({ useBR: true })
// 注册一个directive用来添加code高亮
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('code')
blocks.forEach(block => {
hljs.highlightBlock(block)
})
})
复制代码
4. 自动配置路由
利用require.context
解析某个目录下的文件,将其生成Router的配置
const context = require.context('@/components/', true, /demo\.vue$/)
const componentRouters = context.keys().map(url => {
const start = url.indexOf('/')
const end = url.lastIndexOf('/')
const name = url.substring(start + 1, end)
const path = `/${name}`
return {
name,
path,
component: require(`@/components${path}/demo`).default
}
})
export default new Router({
routes: [
{
path: '/',
name: 'mainPage',
component: mainPage
},
...componentRouters
]
}
)
复制代码
往期文章:
- 从零实现Vue的组件库(零)- 基本结构以及构建工具
- 从零实现Vue的组件库(一)- Toast 实现
- 从零实现Vue的组件库(二)- Slider 实现
- 从零实现Vue的组件库(三)- Tabs 实现
- 从零实现Vue的组件库(四)- File-Reader 实现
- 从零实现Vue的组件库(五)- Breadcrumb 实现
- 从零实现Vue的组件库(六)- Hover-Tip 实现
- 从零实现Vue的组件库(七)- Message-Box 实现
- 从零实现Vue的组件库(八)- Input 实现
- 从零实现Vue的组件库(九)- InputNumber 实现
- 从零实现Vue的组件库(十)- Select 实现
- 从零实现Vue的组件库(十一)- Date-picker 实现
- 从零实现Vue的组件库(十二)- Table 实现
- 从零实现Vue的组件库(十三)- Pagination 实现
- 从零实现Vue的组件库(十四)- RadioGroup 实现
- 从零实现Vue的组件库(十五)- CheckboxGroup 实现
原创声明: 该文章为原创文章,转载请注明出处。