3分钟精通高阶前端随手写TS插件

目录

• 正文
• 什么是Rollup？
• 为何要做脚手架？
• 它能干啥？
• 起锅-安装
• 大火-配置
• 创建目录
• 配置rollup
• 配置ESlint
• TS编译配置
• 配置Babel
• Demo
• 出锅-跑一跑
• 最后Package.json
• 总结

正文

随着业务复杂度和技术深度的增加，有时我们不得不提高抽离插件的效率。尽管有很多的技术方案，但总是夹杂了很多依赖和类库，总感觉没那么纯净。因此，在某个如厕的瞬间，萌发了一种可以酣畅淋漓写插件的姿势。

脚手架，就能应当根据个人爱好和编码习惯来灵活配置。 下面我们就来一层一层的剖析。算了，一层一层太慢你们也没耐心，直接剖。

什么是Rollup？

Rollup是一款集成式的代码打包、应用构建工具。扒拉扒拉文档

为何要做脚手架？

如上面啰嗦的，前端工程化是作为工程师的必要能力，工程化并非一个人就能搞定的，我们需要站在前人/巨人(Copy)的肩膀看世界。

随着技术的发展，涌现了一些最佳实践的构建工具，这些构建工具将一些项目管理和编程开发的行业最佳实践集成到了一个“脚手架”工具中。如此，便有利于其他团队快速构建出高效、高质量的工程化项目。

它能干啥？

构建工具能做的事：

• 处理兼容性
• 混淆、压缩代码
• Tree Shaking
• 转译
• 单元测试
• 打包应用

起锅-安装

yarn add rollup -g

个人推荐使用pnpm

// 安装pnpm
npm install -g pnpm
// 安装rollup
pnpm add rollup -g

大火-配置

使用rollup打包构建有两种方式，直接在命令行下需要手打构建必须的参数，当然我们是做工程，那么就得考虑如何尽可能减少团队成员的上手成本。

创建目录

|-- src                       //开发文件夹
  |   |-- index.ts            //入口文件
|-- rollup.config.js          //rollup配置文件
|-- index.ts                  //对外暴露统一入口(非必须)

配置rollup

根目录下创建一个纯净且功能强大的rollup.config.js配置文件，可以优先了解下各类插件的机制，后面会提供一个package.json，直接安装就齐活了。

import path from 'path';
import ts from 'rollup-plugin-typescript2';
// 将json 文件转换为ES6 模块
import json from '@rollup/plugin-json';
// 在node_模块中查找并绑定第三方依赖项
import resolve from '@rollup/plugin-node-resolve';
// 将CommonJS模块转换为ES6
import commonjs from '@rollup/plugin-commonjs';
// rollup babel插件
import babel from 'rollup-plugin-babel';
// 优化代码压缩
import { terser } from 'rollup-plugin-terser';
// 加载样式文件
import styles from 'rollup-plugin-styles';
// 代码检查
import { eslint } from "rollup-plugin-eslint";
import dts from 'rollup-plugin-dts';
// 热更新服务
import livereload from 'rollup-plugin-livereload';
// 开发服务器
import serve from 'rollup-plugin-serve';
// 清除目录工具
import clear from "rollup-plugin-clear";
import pkg from './package.json';
// 判断是开发环境or生产环境
const NODE_ENV = process.env.NODE_ENV;
const isPro = function () {
  return NODE_ENV === 'production';
};
// 编译支持的文件类型
const extensions = ['.js', '.jsx', '.ts', '.tsx', '.less'];
export default [
  {
    input: path.resolve('./index.ts'),
    output: [
      {
        file: pkg.unpkg,
        format: 'umd',
        name: '插件方法名',
        sourcemap: true,
      },
      {
        file: pkg.module,
        format: 'esm',
        sourcemap: true,
      },
      {
        file: pkg.main,
        format: 'cjs',
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      json(),
      styles(),
      eslint(), // 这里没传入配置参数，会自动加载文件根目录的 `.eslintrc.json` 配置文件。
      ts({
        tsconfig: path.resolve(__dirname, './tsconfig.json'),
        extensions: extensions,
      }),
      babel({
        runtimeHelpers: true,
        exclude: 'node_modules/**',
      }),
      !isPro() &&
        livereload({
          watch: ['dist', 'examples', 'src/**'],
          verbose: false,
        }),
      isPro() && terser(),
      !isPro() &&
        serve({
          headers: { "Access-Control-Allow-Origin": "*", // 本地服务允许跨域 },
          open: false,
          port: 9529,
          contentBase: './', // 本地服务的运行文件根目录
          openPage: '/examples/index.html',
        }),
    ],
  },
  {
    // 生成 .d.ts 类型声明文件
    input: path.resolve('./index.ts'),
    output: {
      file: pkg.types,
      format: 'es',
    },
    plugins: [
      dts(),
      clear({ targets: ["dist/src"], // 项目打包编译生成的目录
      watch: true, // 实时监听文件变化 })
    ],
  },
];

提供自查配置列表：https://www.rollupjs.com/guide/big-list-of-options

配置ESlint

废话介绍ESLint 是在 ES/JS代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误

通过ESlint可以尽可能地规范团队开发的代码风格以及通过静态检查提升代码质量。扒拉扒拉文档 安装eslint

pnpm add eslint -D

初始化，参数可按照心情选择

pnpm run eslint --init

初始化完成后，在根目录创建了一个ESlint的配置文件：.eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "standard"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType":
            "module"
        },
    "rules": { }
}

新建.eslintignore 文件来忽略不需要Eslint检查的内容

/dist/
/public/
/rollup.config.js

配置rollup支持ESlint，ps：上面已经支持了

import { eslint } from "rollup-plugin-eslint";
···
eslint();
···

TS编译配置

根目录创建tsconfig.json文件，设置编译参数

{
  "compilerOptions": {
    "target": "es6", // 编译后的es版本
    "module": "esnext", // 前端模块化规范
    "allowJs": true, // 允许引入js文件
    "strict": true, // 开启严格模式
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "suppressImplicitAnyIndexErrors": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "declaration": true,
    "lib": ["esnext", "DOM"]
  },
  "exclude": ["node_modules/**"]
}

配置Babel

这个就很简单了，直接提供文档自己扒拉扒拉，就两句话一定要去看。

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

Demo

为了能够快速测试插件的调用，又避免引入Vue、React等框架。使用最新浏览器支持的ESM方式加载打包后的插件，并启动服务快速调试，下面我们搞一搞。 根目录下创建examples文件夹，并新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <script src="../dist/index.umd.js"></script>
</head>
<body>
    <h1 align="center" id="app">Hello 我是扫地盲僧!</h1>
    <p align="center" id="content"></p>
</body>
<script>
    const demo = new tsClass('Hello rollup', null, '这是一个基于rollup打包TypeScript的纯净框架')
    const h1 = document.querySelector('#app')
    const p = document.querySelector('#content')
    h1.innerHTML = demo.name
    p.innerHTML = demo.content
</script>

出锅-跑一跑

// 运行起来试一试
pnpm run dev

ok搞定，很复杂吗？不复杂！！

最后Package.json

可以根据自己需求随机删减，学会灵活使用

{
    "name": "rollup-ts-tpl",
    "version": "1.1.1",
    "description": "一个纯净版的ts插件打包cli",
    "main": "dist/index.cjs.js",
    "module": "dist/index.esm.js",
    "unpkg": "dist/index.umd.js",
    "jsdelivr": "dist/index.umd.js",
    "types": "dist/index.d.ts",
    "scripts": {
        "dev": "cross-env ENV=dev rollup -c -w",
        "build": "cross-env ENV=production rimraf dist && rollup -c"
    },
    "author": "扫地盲僧",
    "license": "MIT",
    "devDependencies": {
        "@babel/core": "^7.12.3",
        "@babel/plugin-transform-runtime": "^7.16.4",
        "@babel/preset-env": "^7.12.1",
        "@babel/runtime": "^7.16.3",
        "@rollup/plugin-commonjs": "^16.0.0",
        "@rollup/plugin-eslint": "^8.0.1",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-node-resolve": "^10.0.0",
        "@rollup/plugin-typescript": "^6.1.0",
        "@typescript-eslint/parser": "^4.14.0",
        "@types/node": "^17.0.31",
        "cross-env": "^7.0.3",
        "babel-plugin-external-helpers": "^6.22.0",
        "babel-preset-latest": "^6.24.1",
        "eslint": "^7.18.0",
        "less": "^4.1.2",
        "rollup": "^2.33.1",
        "rollup-plugin-babel": "^4.4.0",
        "rollup-plugin-clear": "^2.0.0",
        "rollup-plugin-dts": "^3.0.2",
        "rollup-plugin-livereload": "^2.0.0",
        "rollup-plugin-serve": "^1.1.0",
        "rollup-plugin-terser": "^7.0.2",
        "rollup-plugin-typescript2": "^0.30.0",
        "tslib": "^2.3.1",
        "typescript": "^4.0.5"
    }
}

总结

Rollup打包工具的基本使用就差不多了，通过尝试可以发现，Rollup的配置等是非常简单的，改变了开发者的工作形式，以及提升了工作（编码）效率

这里我就不贴仓库了，无脑copy倒不如自己按照文档写一遍，又能加深记忆也可快速掌握原理。3分钟让你使用大佬们惯用的姿势。

“自然者，物见其然，不知所以然；同焉皆得，不知所以得”。 作为前端工程师，我们不仅是要会用，还要明白构建的整个过程，这有助于我们在编码、架构设计上能够更加合理，或者说更“自然”。

以上就是3分钟精通高阶前端随手写TS插件的详细内容，更多关于前端手写TS插件的资料请关注我们其它相关文章！