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'),
    ]
  }
}