dait-service

dait-service

dait-service 是为 dait 提供服务的核心模块。

dait-service 做了什么

• 集成了 webpack 自动化构建及其不同的环境配置。
• 集成了 eslint 检验
• 封装 MarkedEssay 插件，用于显示 markdown 的内容
• 读写 articles.json 支撑主题对 markdown 文件数据的依赖
• 提供可配置文件 dait.config.js

MarkedEssay

dait-service 封装了 MarkedEssay 组件用于显示 markdown 的内容。 可以直接在主题入口文件中 main.js 引入

import MarkedEssay from 'dait-service/components/MarkedEssay'

Vue.use(MarkedEssay)

props

| 属性 | 是否必填 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | fileName | 是 | markdown 的文件名。例如 'readme.md' | String | - | | more | 否 | 是否在 more 注释处截至展示 | Boolean | false | | showMoreStyle | 否 | 博文截至样式的渲染函数。参数为 render 函数 | Function | - | | splitWord | 否 | 博文截至显示的注释语句 | string | |

dait.config.js

dait.config.js 需要遵循 commonJs 规范向外导出一个对象

config.site

site：object。为当前博客的站点信息。

属性名	类型	描述
title	string	网站的标题
author	string	网站的站长
subtitle	string	网站的副标题
description	string	网站的描述
keywords	string	网站的关键字，以逗号分割
language	string	网站的语言。 默认 zh-CN

config.theme

theme：string。为网站选用的主题名称。

config.configureWebpack

configureWebpack：object。为 webpack 自动化构建的配置对象

属性名	类型	描述
entry	string	文件编译的入口路径，必须是一个绝对路径。
output	string	文件编译的输出路径，必须是一个绝对路径。
alias	object	全局的路径别名对象。
rules	array	webpack 模块加载器（loader）的配置规则。
plugins	array	webpack 的插件使用
defineData	object	全局注入的数据对象。键为变量名称，值必须是一个字符串。
dev	object	开发模式下的配置对象。详细见下表。
prod	object	测试环境下的配置对象。详细见下表。

dev

属性名	类型	描述
devtool	string	开发模式下的 source-map 模式类型
devServer	object	webpack-dev-server 的配置对象
rules	array	开发模式下的模块加载器（loader）的配置规则。
plugins	array	开发模式下的插件使用

prod

属性名	类型	描述
devtool	string	生产模式下的 source-map 模式类型
optimization	object	生产模式下的配置优化对象
rules	array	生产模式下的模块加载器（loader）的配置规则。
plugins	array	生产模式下的插件使用

config.configurePostcss

configurePostcss：object。为 postcss 的配置对象

dait-service 默认配置

module.exports = {
  site: {
    title: 'blog',
    author: '',
    subtitle: 'my new blog',
    description: '',
    keywords: 'dait, blog, vue, gitee',
    language: 'zh-CN'
  },
  theme: 'default',
  configureWebpack: {
    entry: path.join(themePath, 'main.js'),
    output: path.join(cwd, './dist'),
    alias: {
      '@': path.join(cwd, './'),
      '@theme': themePath
    },
    rules: [],
    plugins: [],
    defineData: {},
    dev: {
      devtool: 'cheap-module-eval-source-map',
      devServer: {
        open: false,
        hot: true,
        port: 6800,
        clientLogLevel: 'warning'
      },
      rules: [
        {
          test: /\.css$/,
          use: [
            'vue-style-loader',
            {
              loader: 'css-loader',
              options: {
                esModule: false
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  config: path.join(__dirname, './postcss.config.js')
                }
              }
            }
          ]
        },
        {
          test: /\.less$/,
          use: [
            'vue-style-loader',
            {
              loader: 'css-loader',
              options: {
                esModule: false
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  config: path.join(__dirname, './postcss.config.js')
                }
              }
            },
            'less-loader'
          ]
        },
        {
          test: /\.vue$/,
          enforce: 'pre',
          exclude: [
            path.join(cwd, './node_modules'),
            path.resolve('./node_modules')
          ],
          loader: 'eslint-loader'
        },
        {
          test: /\.js$/,
          enforce: 'pre',
          exclude: [
            path.join(cwd, './node_modules'),
            path.resolve('./node_modules')
          ],
          loader: 'eslint-loader'
        }
      ],
      plugins: [
        new webpack.HotModuleReplacementPlugin()
      ]
    },
    prod: {
      devtool: 'none',
      optimization: {
        minimize: true,
        minimizer: [
          new OptimizeCssPlugin(),
          new TerserWebpackPlugin()
        ],
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            libs: {
              name: 'depend/chunk-libs',
              test: /[\\/]node_modules[\\/]/,
              priority: 10,
              chunks: 'initial' // 只打包初始时依赖的第三方
            },
            elementUI: {
              name: 'depend/chunk-elementUI', // 单独将 elementUI 拆包
              priority: 20, // 权重
              test: /[\\/]node_modules[\\/]element-ui[\\/]/
            },
            vueLibs: {
              name: 'depend/chunk-vue', // 单独将 vue 开头的依赖 拆包
              priority: 15, // 权重
              test: /[\\/]node_modules[\\/]vue/
            }
          }
        },
        runtimeChunk: 'single'
      },
      rules: [
        {
          test: /\.css$/,
          use: [
            CssExtractPlugin.loader,
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  config: path.join(__dirname, './postcss.config.js')
                }
              }
            }
          ]
        },
        {
          test: /\.less$/,
          use: [
            CssExtractPlugin.loader,
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  config: path.join(__dirname, './postcss.config.js')
                }
              }
            },
            'less-loader'
          ]
        }
      ],
      plugins: [
        new CleanPlugin(),
        new CssExtractPlugin({
          filename: 'css/[name]-[contenthash:8].css'
        })
      ]
    }
  },
  configurePostcss: {
    plugins: [
      require('autoprefixer'),
    ]
  }
}