挑战21天手写前端框架 day10 手撕 esbuild 插件开发完成对 style 的支撑-阿里云开发者社区

阅读本文需要 30 分钟，编写本文耗时 4 小时

最佳实践的目录结构

我们现在的页面还都写在 src/index.tsx 中，但是当我们项目变得复杂之后，仅用一个文件来管理整个项目显然是不行的，因此，我们借鉴一下 umi 的最佳实践将我们的页面按以下的目录结构重新调整一下。这是当前我们需要用到的文件目录，后续我们会不断的扩展我们需要的目录结构。

.
├── dist
├── src
│   ├── layout
│   │   ├── inedx.tsx
│   │   └── index.less
│   └── pages
│       ├── index.less
│       └── index.tsx
├── node_modules
├── package.json
├── tsconfig.json
└── typings.d.ts
复制代码

dist 目录

执行 malita build 后，产物默认会存放在这里。

`/src` 目录

layouts/index.tsx

约定式路由时的全局布局文件，后续我们会默认用他来包裹我们的路由。比如，你的路由是：

[
  { path: '/', component: './pages/index' },
  { path: '/users', component: './pages/users' },
]
复制代码

从组件角度可以简单的理解为如下关系：

<layout>
  <page>1</page>
  <page>2</page>
</layout>
复制代码

pages 目录

所有路由组件存放在这里。使用约定式路由时，约定 pages 下所有的 (j|t)sx? 文件即路由。使用约定式路由，意味着不需要维护，可怕的路由配置文件。约定式路由的实现我们会在明天完成。

调整当前的文件

将我们当前的 src/index.tsx 进行拆解。比如将 Layout 的内容存放到 src/layouts/index.tsx

import React from 'react';
import { useLocation } from 'react-router-dom';
import { Page, Content, Header } from '@alita/flow';
import { useKeepOutlets } from '@malita/keepalive';
const Layout = () => {
    const { pathname } = useLocation();
    const element = useKeepOutlets();
    return (
        <Page>
            <Header>当前路由: {pathname}</Header>
            <Content>
                {element}
            </Content>
        </Page>
    )
}
export default Layout;
复制代码

Hello 放到首页 src/pages/home/tsx

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
const Hello = () => {
    const [text, setText] = React.useState('Hello Malita!');
    const [count, setCount] = useState(0);
    return (
        <>
            <p
                onClick={() => {
                    setText('Hi!');
                }}
            > {text} </p>
            <p>{count}</p>
            <p><button onClick={() => setCount(count => count + 1)}> Click Me! Add!</button></p>
            <Link to='/users'>go to Users</Link>
        </>);
};
export default Hello;
复制代码

同理整理 Users 和 Me 页面，然后修改项目主入口 src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter, Routes, Route, } from 'react-router-dom';
import KeepAliveLayout from '@malita/keepalive';
import Layout from './layouts/index';
import Hello from './pages/home';
import Users from './pages/users';
const App = () => {
    return (
        <KeepAliveLayout keepalive={[/./]}>
            <HashRouter>
                <Routes>
                    <Route path='/' element={<Layout />}>
                        <Route path="/" element={<Hello />} />
                        <Route path="/users" element={<Users />} />
                    </Route>
                </Routes>
            </HashRouter>
        </KeepAliveLayout>
    );
}
const root = ReactDOM.createRoot(document.getElementById('malita'));
root.render(React.createElement(App));
复制代码

这样修改完之后，我们的整个项目的结构就会变得很清晰。这样开发人员就可以快速的上手开发，比如，维护一个老项目的时候，有个 bug 出现在 home 路由，你就知道，你只需要修改 home.tsx 而不用到处找文件。

支持 css

给我们的页面加一点简单的样式。我们这里加两个 css 文件。

src/layouts/index.css

.malita-layout {
  font-size: 24px;
}
复制代码

src/pages/home.css

.malita-home {
  font-size: 24px;
}
复制代码

分别在 layout 和 home 页面中 import "./index.css" 和 import "./home.css";

然后在页面中使用它们。随便用，你喜欢加哪就加哪，比如

<p className='malita-home'>{count}</p>
复制代码

执行 pnpm dev，发现在 www 目录下新增了一个 index.css

/* src/layouts/index.css */
.malita-layout {
  font-size: 24px;
}
/* src/pages/home.css */
.malita-home {
  font-size: 32px;
  background: blue;
}
复制代码

此时我们只要将 index.css 文件挂载到 html 上就可以加载支持 css 了

<link href="/${DEFAULT_OUTDIR}/index.css" rel="stylesheet"></link>
复制代码

从效果上来看，我们的项目已经支持 css 了。但是，从感觉上不像那么一回事，有没有一种更加智能的东西能够帮助我们实现这个功能呢？

esbuild 插件编写

因为 esbuild 比较新，生态还是比较少的，所以遇到一些需求，我个人更倾向于自己实现插件。

esbuild 的插件 api 还是比较简单的，只有 onResolve 和 onLoad，一个用来处理路径相关的问题，一个用来处理加载数据。

onResolve

可以用它来处理路径相关的需求。

onResolve({ filter: filter }, async (args) => {
    return {
        path,
    };
});
复制代码

filter 表示路径的过滤条件，在 onLoad 中也是一样的用法，比如你要处理所有的 md 文件，你可以用 filter: /\.md$/，比如给所有的 md 文件添加前缀就是

onResolve({ filter: /\.md$/ }, async (args) => {
    // 只是演示，给这个路径加前缀没什么实际作用
    const path = `prefix/${args.path}`;
    return {
        path,
    };
});
复制代码

onResolve 还有一个使用的用法，是在 return 的时候指定 namespace，默认的namespace 一般是 file。你可以通过指定 namespace 把文件归类，这样在 onLoad 中可以针对这些文件做特殊处理。

比如官网中的例子：

onResolve({ filter: /^env$/ }, args => ({
    path: args.path,
    namespace: 'env-ns',
}))
onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
    contents: JSON.stringify(process.env),
    loader: 'json',
}))
复制代码

这样你就可以在项目代码中使用 env，哪怕实际上并不存在这个模块和文件。

import { PATH } from 'env'
console.log(`PATH is ${PATH}`)
复制代码

onLoad

可以用它来处理内容相关的需求。一般是对文件内容有修改的时候，会用到它。比如上面的例子，就是把本来是不存在内容，指定为 JSON.stringify(process.env) 所以就算本来这个文件不存在，在项目中也可以正常使用。

我们可以用它来实现一些 esbuild 官方还不支持的 loader，比如处理 less 文件，使用 postcss 等。

这里用 less 做个演示：

onLoad({ filter: /\.less$/ }, async (args) => {
    let content = await fs.readFile(args.path, 'utf-8');
    const dir = path.dirname(args.path);
    const filename = path.basename(args.path);
    const result = await less.render(content, {
        filename,
        rootpath: dir,
        paths: [...(lessOptions.paths || []), dir],
    });
    return {
        contents: result.css,
        loader: 'css',
        resolveDir: dir,
    };
});
复制代码

因为 esbuild 不能识别 less 文件，所以上面的例子中我们用 less.render 将 less 文件转换成 esbuild 能够识别的 css 文件。

当然 less 的实际处理要比上述的复杂的多，这里只是演示。

实现 esbuild 的 styles 插件

使用 onResolve 匹配所有 .css 路径的文件，将它的命名空间改到 style-stub 上。

onResolve({ filter: /\.css$/, namespace: 'file' }, (args) => {
      return { path: args.path, namespace: 'style-stub' };
    });
复制代码

使用 onLoad 修改 style-stub 中的返回内容

onLoad({ filter: /.*/, namespace: 'style-stub' }, async (args) => ({
    contents: `
  import { injectStyle } from "__style_helper__"
  import css from ${JSON.stringify(args.path)}
  injectStyle(css)
`,
}));
复制代码

这里又 import 两个文件，一个是 __style_helper__，另一个是它的原始路径。因为我们项目根本就没有 __style_helper__ 文件，所以我们需要给这个路径加载的时候返回我们需要的代码。这就是我前面说过的“无中生有”。

还是想用 onResolve 匹配路径，将它指向 style-helper

onResolve(
    { filter: /^__style_helper__$/, namespace: 'style-stub' },
    (args) => ({
        path: args.path,
        namespace: 'style-helper',
        sideEffects: false,
    }),
);
复制代码

然后使用 onLoad 返回我们需要的代码工具类，值得注意的是 onLoad 就是构建的最后一环了，所以我们需要返回正确的 es5 语法。

onLoad({ filter: /.*/, namespace: 'style-helper' }, async () => ({
    contents: `
  export function injectStyle(text) {
    if (typeof document !== 'undefined') {
      var style = document.createElement('style')
      var node = document.createTextNode(text)
      style.appendChild(node)
      document.head.appendChild(style)
    }
  }
`,
}));
复制代码

接下来我们就来处理，它的另一个 import 它原始路径的逻辑处理。根据我们上面提到的 esbuild 的插件编写，遇到路径处理，都用 onResolve

onResolve({ filter: /\.css$/, namespace: 'style-stub' }, (args) => {
    return { path: args.path, namespace: 'style-content' };
});
复制代码

然后我们返回项目中真实的 css 文件，这时候就可以用上 esbuild 对 css 进行构建了。

onLoad(
    {
        filter: /.*/,
        namespace: 'style-content',
    },
    async (args) => {
        const { errors, warnings, outputFiles } = await esbuild.build(
            {
                entryPoints: [args.path],
                logLevel: 'silent',
                bundle: true,
                write: false,
                charset: 'utf8',
                minify: true,
                loader: {
                    '.svg': 'dataurl',
                    '.ttf': 'dataurl',
                },
            }
        );
        return {
            errors,
            warnings,
            contents: outputFiles![0].text,
            loader: 'text',
        };
    },
);
复制代码

整个过程非常的巧妙，逻辑简述的话，大概如下

import "./home.css"
复制代码

会被转换成

// import css from "./css"
var css = ".malita-home { font-size: 32px;background: blue;}";
function injectStyle(text) {
    if (typeof document !== 'undefined') {
        var style = document.createElement('style')
        var node = document.createTextNode(text)
        style.appendChild(node)
        document.head.appendChild(style)
    }
}
injectStyle(css); 
复制代码

这样只要我们加载了 js ，就会自动挂载我们用到的 css 文件了。

上述的实现，是为了将如何编写 esbuild 插件将清除，里面有很多实现细节被我忽略了，真正的实现在 @umijs/bundler-esbuild 中，感兴趣的朋友，可以进一步去阅读 umi 的源码。

明天我们会完成约定式路由的实现，到此 malita 就会成为一个真正的框架了。感谢关注，感谢阅读。

今天的内容是比较新的 esbuild 的插件开发，相信熟悉的朋友不是很多。希望这篇文章能够帮到你们。

最近的系列文章收到了一些朋友的反馈，也感谢朋友们指出文章中出现的错误，手误和概念缺失，我都会一一改正。

还有朋友推荐我将标题改成《umi 核心开发人员带你21天手写前端框架》，关注的人会更多。哈哈哈，我没好意思放。

希望能够得到更多朋友的互动，我希望将这东西写成一个玩具，在写它的时候，能够学到更多的东西。

源码归档

挑战21天手写前端框架 day10 手撕 esbuild 插件开发完成对 style 的支撑

最佳实践的目录结构

dist 目录

`/src` 目录

layouts/index.tsx

pages 目录

调整当前的文件

支持 css

esbuild 插件编写

onResolve

onLoad

实现 esbuild 的 styles 插件

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

挑战21天手写前端框架 day10 手撕 esbuild 插件开发完成对 style 的支撑

最佳实践的目录结构

dist 目录

/src 目录

layouts/index.tsx

pages 目录

调整当前的文件

支持 css

esbuild 插件编写

onResolve

onLoad

实现 esbuild 的 styles 插件

热门文章

最新文章

相关课程

相关电子书

`/src` 目录