开发一个在线检测文章中代码块占比的页面（上）在之前的文章中，我们用python简单写了一个检测文章中关于代码和代码块

前言

在之前的文章中，我们用python简单写了一个检测文章中关于代码和代码块的占比的脚本，有些小伙伴们反馈能不能出一个在线版本的，方便将写后文章代码贴放上去检测。

安排.png

成品效果

该项目使用技术栈：Webpack+jQuery+Tailwind

在线使用地址：qc2168.github.io/article-inf…

拉取模板

第一步，使用我们的webpack-template，可以点击use this template将这个仓库作为一个模板，或者把这个仓库给克隆下。

简说下git clone和use this template的区别对比：
- use this template
  - 当仓库被设定为模板后，你会在GitHub仓库页面中看到use this template按钮，即是将这个仓库作为开发的起点，但是从模板创建的分支具有不相关的历史记录，因此您无法创建拉取请求或在分支之间合并。
- clone
  - 将仓库完整的克隆到本地。

删除无需文件

删除src/pages中的hello文件夹并修改webpack.config.ts配置文件，把与hello页面中有关的属性移除。

把entry中的hello属性删除（15行处）。

entry: {
  main: './src/main.ts',
  index: './src/pages/index/index.ts', // index页面
},

删除hello页面的HtmlWebpackPlugin（79 - 84行处）。

plugins: [
  new HtmlWebpackPlugin({
    title: 'index',
    filename: 'index.html',
    template: './src/pages/index/index.html',
    chunks: ['index', 'main'],
  }),
  new ESLintPlugin({
    extensions: ['js', 'ts'],
    exclude: '/node_modules/',
  }),
],

安装所需依赖

在终端中，执行yarn / npm install安装项目所需依赖。

安装tailwind

在项目终端中执行命令，安装tailwind、postcss、autoprefixer、postcss-loader。

npm install tailwindcss@latest postcss@latest autoprefixer@latest postcss-loader

配置tailwind

在webpack.config.ts中的module/rules加入postcss-loader（43行处）。

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader', 'postcss-loader'],
},

在项目根目录创建一个postcss.config.js，将 tailwindcss 和 autoprefixer 添加到您的 PostCSS 配置中。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }

在项目根目录终端执行以下命令，生成一份tailwind的配置文件。

npx tailwindcss init
# Created Tailwind CSS config file: tailwind.config.js

在src/main.ts首行插入以下代码，将tailwind注入到你的CSS中。

import 'tailwindcss/tailwind.css';

在index.html中写入以下代码，看下tailwind是否被成功引入可以正常使用。

<p class="font-mono text-3xl font-bold tracking-wider leading-tight text-center mb-5 uppercase">
    article
</p>

运行yarn serve将项目启动起来，页面跑起来之后，如果是以下图中的效果可以看到绑定对应的类目和一样效果即没有问题，否则你需要检查下前面是不是遗漏了那一步操作。

开发一个在线检测文章中代码块占比的页面（ 上 ）

前言