十一号插座

小捆子代码,小捆子快乐.

创建最小的每页或应用程序级捆绑 CSS, JavaScript, 或 HTML 以包含在您的"十一" 项目中 .

使其易于执行关键CSS,只使用中的CSS/JS捆绑,SVG图标库,或通过XHR加载的次级HTML内容.

为什么?

这个项目是11T的最小可行捆绑和资产管道. 它不执行任何转录或代码操作(默认). 你输入的代码是出局的代码(可配置) transforms 若您想修改代码.

对于更大,更复杂的使用案例,你可能想要使用一个更完整的功能捆绑器,比如Vite,Parcel,Webpack,滚出,Esbuilt,或者其他.

但请注意,一个全能的捆绑机的构建性能成本相当高,所以要注意权衡使用这种捆绑机风格的成本与这个插件是否具有足够的功能供您使用,特别是当平台成熟时,我们看到代码转录(ES模块随处可见)的回报率不断下降.

安装

无需安装。 从"十一"核心开始 v3.0.0 而更新,这个插件现在与"十一"捆绑在一起.

使用量

默认情况下, Bundle 插件 v2.0 不包括任何默认捆绑 。 你必须自己通过 eleventyConfig.addBundle。 。 。 .

[注] 使用 WebC 十一进取插件时会出现一个显著的例外 css, (中文(简体) ), js,以及 html 包裹给你.

要创建捆绑类型, 请使用 eleventyConfig.addBundle 在您的"十一"配置文件中(默认) eleventy.config.js:

// eleventy.config.js
export default function(eleventyConfig) {
    eleventyConfig.addBundle("css");
};

这有两件事:

1. 创建新 css 在此捆绑中添加任意代码的短码
2. 添加数 "css" 作为符合条件的类型参数 getBundle 财务报告和审定财务报表 getBundleFileUrl 简码.

完整选项列表

export default function(eleventyConfig) {
    eleventyConfig.addBundle("css", {
        // (Optional) Folder (relative to output directory) files will write to
        toFileDirectory: "bundle",

        // (Optional) File extension used for bundle file output, defaults to bundle name
        outputFileExtension: "css",

        // (Optional) Name of shortcode for use in templates, defaults to bundle name
        shortcodeName: "css",
        // shortcodeName: false, // disable this feature.

        // (Optional) Modify bundle content
        transforms: [],

        // (Optional) If two identical code blocks exist in non-default buckets, they’ll be hoisted to the first bucket in common.
        hoist: true,

        // (Optional) In 11ty.js templates, having a named export of `bundle` will populate your bundles.
        bundleExportKey: "bundle",
        // bundleExportKey: false, // disable this feature.
    });
};

更多信息 hoist 并重复捆绑起。 。 。 .

通用短码

以下通用短码(参见: njk, (中文(简体) ), liquid, (中文(简体) ), hbs, (中文(简体) ), 11ty.js,以及 webc)由此插件提供:

• getBundle 作为字符串检索捆绑的代码.
• getBundleFileUrl 创建磁盘上的捆绑文件,并将 URL 检索到该文件.

这里有一个 现实世界承诺在 eleventy-base-blog 项目。 。 。 .

示例: 在 11ty 的 Markdown 文件中添加捆绑代码

# My Blog Post

This is some content, I am writing markup.

{% css %}
em { font-style: italic; }
{% endcss %}

## More Markdown

{% css %}
strong { font-weight: bold; }
{% endcss %}

修改为:

<h1>My Blog Post</h1>

<p>This is some content, I am writing markup.</p>

<h2>More Markdown</h2>

注意,捆绑的代码被排除了!

有几个 更多实例来啊!

捆绑代码

<!-- Use this *anywhere*: a layout file, content template, etc -->
<style>{% getBundle "css" %}</style>

<!--
You can add more code to the bundle after calling
getBundle and it will be included.
-->
{% css %}* { color: orange; }{% endcss %}

将捆绑写入文件

将捆绑的内容写入输出目录中的内容包文件位置, 并将 URL 返回到文件中, 这样使用 :

<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">

注: 将捆绑写入文件对于首次访问的空卡很可能会比较慢,但在浏览器中缓存的重复视图(并跨多页,也更好).

资产桶

<!-- This goes into a `defer` bucket (the bucket can be any string value) -->
{% css "defer" %}em { font-style: italic; }{% endcss %}

<!-- Pass the arbitrary `defer` bucket name as an additional argument -->
<style>{% getBundle "css", "defer" %}</style>
<link rel="stylesheet" href="{% getBundleFileUrl 'css', 'defer' %}">

A 类 default 桶隐含:

<!-- These two statements are the same -->
{% css %}em { font-style: italic; }{% endcss %}
{% css "default" %}em { font-style: italic; }{% endcss %}

<!-- These two are the same too -->
<style>{% getBundle "css" %}</style>
<style>{% getBundle "css", "default" %}</style>

实例

关键支助

// eleventy.config.js
export default function(eleventyConfig) {
    eleventyConfig.addBundle("css");
};

使用资产桶将 CSS 分隔为 default 桶和一个 defer 水桶 同步装入.

(注意一些HTML锅炉板被从以下样本中省去)

<!-- … -->
<head>
    <!-- Inlined critical styles -->
    <style>{% getBundle "css" %}</style>

    <!-- Deferred non-critical styles -->
    <link rel="stylesheet" href="{% getBundleFileUrl 'css', 'defer' %}" media="print" onload="this.media='all'">
    <noscript>
        <link rel="stylesheet" href="{% getBundleFileUrl 'css', 'defer' %}">
    </noscript>
</head>
<body>
    <!-- This goes into a `default` bucket -->
    {% css %}/* Inline in the head, great with @font-face! */{% endcss %}
    <!-- This goes into a `defer` bucket (the bucket can be any string value) -->
    {% css "defer" %}/* Load me later */{% endcss %}
</body>
<!-- … -->

相关数字 :

• 看看这个 使用"十一边"演示关键 CSS 用于不使用 JavaScript 的重复视图优化.
• 您可能想用 fetchpriority 何时 浏览器支持改进。 。 。 .

SVG 图标库

这里 svg 正在创建捆绑.

// eleventy.config.js
export default function(eleventyConfig) {
    eleventyConfig.addBundle("svg");
};

<svg width="0" height="0" aria-hidden="true" style="position: absolute;">
    <defs>{% getBundle "svg" %}</defs>
</svg>

<!-- And anywhere on your page you can add icons to the set -->
{% svg %}
<g id="icon-close"><path d="…" /></g>
{% endsvg %}

And now you can use `icon-close` in as many SVG instances as you’d like (without repeating the heftier SVG content).

<svg><use xlink:href="#icon-close"></use></svg>
<svg><use xlink:href="#icon-close"></use></svg>
<svg><use xlink:href="#icon-close"></use></svg>
<svg><use xlink:href="#icon-close"></use></svg>

反应后盔型 <head> 添加数

// eleventy.config.js
export default function(eleventyConfig) {
    eleventyConfig.addBundle("html");
};

这可能存在于一个"十一"布局文件中 :

<head>
    {% getBundle "html", "head" %}
</head>

然后在内容中,你可能会想 特定页面 preconnect数字 :

{% html "head" %}
<link href="https://v1.opengraph.11ty.dev" rel="preconnect" crossorigin>
{% endhtml %}

装有 Render 插件的套装

您可以在 {% css %} 如果您想使用"十一"模板类型做更多的高级工作, 也会使用简码.

这个例子假设您添加了 渲染插件 编辑 scss 自定义模板类型 到您的十一配置文件.

{% css %}
  {% renderTemplate "scss" %}
  h1 { .test { color: red; } }
  {% endrenderTemplate %}
{% endcss %}

现在编译的 Sass 在您的默认捆绑中可以使用, 并将出现在 getBundle 财务报告和审定财务报表 getBundleFileUrl。 。 。 .

使用方式 网络C

从开始 @11ty/[email protected] (轨道在 问题48) 此插件默认在"十一通" WebC 插件中使用. 具体来说, WebC Bundler 模式 现在在引擎盖下使用捆绑插件.

要将 CSS 添加到 WebC 的捆绑中, 您需要使用 <style> 网页或组件中的元素 :

<style>/* This is bundled. */</style>
<style webc:keep>/* Do not bundle me—leave as is */</style>

要在WebC的一行页面中添加JS,您需要 <script> 网页或组件中的元素 :

<script>/* This is bundled. */</script>
<script webc:keep>/* Do not bundle me—leave as is */</script>

• 通过 WebC 帮助者的现有呼叫 getCss 或者说 getJs (例如:. <style @raw="getCss(page.url)">) 已被监听到 getBundle (计: "css" 财务报告和审定财务报表 "js" (分别为)自动.
  • 为了保持一致性,您可能倾向于在任何地方使用捆绑插件方法名称: <style @raw="getBundle('css')"> 财务报告和审定财务报表 <script @raw="getBundle('js')"> 两者都很好.
• 在 WebC 之外, 通用过滤器 webcGetCss 财务报告和审定财务报表 webcGetJs 十一岁被撤走 v3.0.0-alpha.10 赞成: getBundle 通用短码( N){% getBundle "css" %} 财务报告和审定财务报表 {% getBundle "js" %} 页:1.

修改捆绑输出

你可以用电线连接到自己的 方便的自动调用器来转换捆绑输出 以下是一个简单的例子: postcss 融合。 。 。 .

const postcss = require("postcss");
const postcssNested = require("postcss-nested");

export default function(eleventyConfig) {
    eleventyConfig.addBundle("css", {
        transforms: [
            async function(content) {
                // this.type returns the bundle name.
                // Same as Eleventy transforms, this.page is available here.
                let result = await postcss([postcssNested]).process(content, { from: this.page.inputPath, to: null });
                return result.css;
            }
        ]
    });
};

高级

限制

Bundles 不支持筑巢或再生( yet?) 。 如果这对你们有用,请提出一个问题!