{"id":20243981,"url":"https://github.com/carbonpackages/carbon.pipeline","last_synced_at":"2025-04-13T09:44:36.499Z","repository":{"id":42426500,"uuid":"377838441","full_name":"CarbonPackages/Carbon.Pipeline","owner":"CarbonPackages","description":"Ultra-fast build stack for Neos CMS based on esbuild and PostCSS","archived":false,"fork":false,"pushed_at":"2025-03-21T15:33:29.000Z","size":1686,"stargazers_count":16,"open_issues_count":2,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T01:11:25.082Z","etag":null,"topics":["build","css","esbuild","hacktoberfest","javascript","neoscms","postcss","react","svelte","typescript","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CarbonPackages.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jonnitto","custom":"https://www.paypal.me/Jonnitto/20eur"}},"created_at":"2021-06-17T13:22:47.000Z","updated_at":"2025-03-21T15:19:04.000Z","dependencies_parsed_at":"2022-09-16T08:11:52.773Z","dependency_job_id":"3b95ac60-a1f8-45c5-b7d2-1ad17a6974e5","html_url":"https://github.com/CarbonPackages/Carbon.Pipeline","commit_stats":{"total_commits":370,"total_committers":7,"mean_commits":"52.857142857142854","dds":0.05405405405405406,"last_synced_commit":"b7f2bf3b2acf0541d3715fb77c45073810e9e189"},"previous_names":[],"tags_count":86,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarbonPackages%2FCarbon.Pipeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarbonPackages%2FCarbon.Pipeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarbonPackages%2FCarbon.Pipeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarbonPackages%2FCarbon.Pipeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CarbonPackages","download_url":"https://codeload.github.com/CarbonPackages/Carbon.Pipeline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248694176,"owners_count":21146944,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build","css","esbuild","hacktoberfest","javascript","neoscms","postcss","react","svelte","typescript","vuejs"],"created_at":"2024-11-14T09:10:59.115Z","updated_at":"2025-04-13T09:44:36.474Z","avatar_url":"https://github.com/CarbonPackages.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jonnitto","https://www.paypal.me/Jonnitto/20eur"],"categories":[],"sub_categories":[],"readme":"\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/user-attachments/assets/34191bf1-213e-484e-aa4a-62b337163592\"\u003e\n  \u003cimg alt=\"Carbon.Pipeline – Build stack for Neos CMS\" src=\"https://github.com/user-attachments/assets/b8f980bc-ba34-4595-8a34-51ba10f6da8a\"\u003e\n\u003c/picture\u003e\n\n[![Latest stable version]][packagist] [![Download]][main.zip] [![GitHub stars]][stargazers] [![GitHub watchers]][subscription] [![GitHub license]][license] [![GitHub issues]][issues] [![GitHub forks]][network] [![Twitter]][tweet] [![Sponsor @Jonnitto on GitHub]][sponsor]\n\n**Carbon.Pipeline is a delicious blend of [esbuild] and [PostCSS] to form a full-featured, ultra-fast modern Javascript and CSS bundler for Flow Framework and [Neos CMS].**\n\n## Getting started\n\nFirst, thank you that you want to give this build stack a try! If you miss a ✨ feature or found a 🐛 bug, feel free to [open an issue].\n\n### Install via [composer]\n\nRun `composer require carbon/pipeline --dev`. Some files (if not already existing) will be copied to your root folder during the installation. After installing the package, run the command `install` to install the required packages defined in `package.json`. Feel free to modify and change dependencies before installing 👍\n\n#### Standalone use in custom projects without Neos\n\nCarbon.Pipeline is also a perfect choice for your non-Neos projects. Consider installing the composer package `neos/composer-plugin` beforehand to get Carbon.Pipeline installed in the correct directory under `Build/Carbon.Pipeline`.\n\n### Manual install\n\nIf you want to make significant adjustments to the build stack, you can also [download the code as zip file][main.zip] and put it in the `Build/Carbon.Pipeline` folder. Go to `Carbon.Pipeline/RootFiles/Global` and `Carbon.Pipeline/RootFiles/JavaScript` or `Carbon.Pipeline/RootFiles/TypeScript`, copy the files to your root folder (Don't forget the hidden files, starting with a dot). After this is done, run the command `install` to install the required packages defined in `package.json`. Feel free to modify and change dependencies before installing 👍\n\n### Choose a package manager\n\nYou can choose between different package managers: [npm], [Yarn] and the ultra-fast and disk-space saving [pnpm]. You can set your favorite package manager by running the command `pnpm setPackageManager`, `npm run setPackageManager npm` or `yarn setPackageManager yarn`. The script behind it don't need any dependencies, so you can run it before the `install` command. **The default package manager is `pnpm`**\n\n## Add files to the build stack\n\nCarbon.Pipeline assumes the following project directory structure for resources:\n\nA configured location under\n\n- `Resources/Private`: input files\n- `Resources/`: output files\n\nThe whole configuration, including which files to build, is configured in [`pipeline.yaml`]. The default values are set in [`defaults.yaml`] and merged with your configuration. Under the key `packages`, you can either add an array with package settings or, if you have just one entry, you can directly add the configuration:\n\n```yaml\npackages:\n  - package: Vendor.Bar\n    files:\n      - Main.pcss\n      - Main.js\n\n# This is the same as\npackages:\n  package: Vendor.Bar\n  files:\n    - Main.pcss\n    - Main.js\n```\n\nIf you have just one file, you can pass this directly without creating an array:\n\n```yaml\npackages:\n  package: Vendor.Bar\n  files: Main.js\n```\n\nIf you don't set files, all parsable files from the input folder get rendered. Files that start with an underscore (`_`) will be ignored.\n\n```yaml\npackages:\n  package: Vendor.Bar\n```\n\nTo change the input and/or the output folder, you can do this with the `folder` option:\n\n```yaml\npackages:\n  package: Vendor.Bar\n  folder:\n    input: Assets\n    output:\n      inline: Private/Templates\n      style: Public\n      script: Public\n      module: Public\n      commonJS: Public\n```\n\nFurther, you can write the files to another package:\n\n```yaml\npackages:\n  package: Vendor.Bar\n  folder:\n    output:\n      package: Vendor.Theme\n```\n\nIf you want to go crazy with multi-sites in Neos, you can also write the files to multiple packages:\n\n```yaml\npackages:\n  package: Vendor.Bar\n  folder:\n    output:\n      package:\n        - Vendor.Theme\n        - Vendor.Bar\n```\n\nA package entry has the following options:\n\n| Key                        | Type                | Description                                                                                      | Example              |\n| -------------------------- | ------------------- | ------------------------------------------------------------------------------------------------ | -------------------- |\n| `package`                  | `string`            | The name of the package **(required)**                                                           | `Vendor.Foo`         |\n| `files`                    | `string` or `array` | The names of the entry files. If none given, all parsable files in the input folder get rendered | `Main.js`            |\n| `ignoredFiles`             | `string` or `array` | List of files who should be ignored                                                              | `Main.js`            |\n| `folder.input`             | `string`            | The folder under `Resources/Private` where to look for the entry files                           | `Assets`             |\n| `folder.output.package`    | `string` or `array` | If set, the files will be writen in a different package (one or multiple)                        | `Foo.Bar`            |\n| `folder.output.inline`     | `string`            | The folder where inline files get rendered                                                       | `Private/Templates/` |\n| `folder.output.style`      | `string`            | The folder where inline styles rendered                                                          | `Public/Assets`      |\n| `folder.output.script`     | `string`            | The folder where inline scripts rendered                                                         | `Public/Assets`      |\n| `folder.output.module`     | `string`            | The folder where inline modules rendered                                                         | `Public/Assets`      |\n| `folder.output.commonJS`   | `string`            | The folder where inline commonJS files get rendered                                              | `Public/Assets`      |\n| `external`                 | `string` or `array` | You can mark a file or a package as [external] to exclude it from your build.                    | `*/Modules/*`        |\n| `inline`                   | `boolean`           | Flag to toggle if the files should be inlined. If set, sourcemaps are disabled                   | `true`               |\n| `sourcemap`                | `boolean`           | Flag to toggle source map generation                                                             | `false`              |\n| `format`                   | `string`            | Set the format of the output file. [Read more][esbuild format]                                   | `cjs`                |\n| `jsFileExtension`          | `array` or `false`  | File extensions of javascript files. If set to `false`, all files will have the extension `.js`  | `false`              |\n| `jsFileExtension.script`   | `string`            | File extension of script files                                                                   | `.js`                |\n| `jsFileExtension.module`   | `string`            | Output extension of module JS files.                                                             | `.module`            |\n| `jsFileExtension.commonJS` | `string`            | Output extension of common JS files.                                                             | `.common`            |\n\nThese are the default values for the folders:\n\n```yaml\nfolder:\n  input: Fusion\n  output:\n    inline: Private/Templates/InlineAssets\n    style: Public/Styles\n    script: Public/Scripts\n    module: Public/Modules\n    commonJS: Public/CommonJS\n```\n\nand these for the build options:\n\n```yaml\nexternal: null\ninline: false\nsourcemap: true\nformat: iife\njsFileExtension:\n  script: .js\n  module: .mjs\n  commonJS: .cjs\n```\n\nThe target folders can be adjusted under the key `folder.output`. If you want to change the defaults for all your packages, you can also set this globally in your [`pipeline.yaml`]:\n\n```yaml\nfolder:\n  input: Assets\n  output:\n    inline: Private/Templates\n    style: Public\n    script: Public\n    module: Public\n    commonJS: Public\n\nbuildDefaults:\n  sourcemap: false\n  format: esm\n```\n\nPlease look at the [`defaults.yaml`] file for all the options.\n\nIf you set an entry file with the javascript module suffix (`.mjs`, `.mjsx`, `.mts` or `.mtsx`) the format of this file will be enforced to `esm`. The same with commonJS: If you set an entry file with the javascript commonJS suffix (`.cjs`, `.cjsx`, `.cts` or `.ctsx`) the format of this file will be enforced to `cjs`. E.g., if you have the following array `[\"Main.js\", \"Module.mjs\", \"CommonJS.cjs\"]`, and have no specific setting for the format, `Main.js` will have the format `iife`, `Module.mjs` will have the format `esm` and `CommonJS.cjs` will have the format `cjs`.\n\n## Tasks\n\n**As you can choose your favorite package manager, you have to prepend the task name with the corresponding name (`pnpm`, `yarn` or `npm run`)**\n\nThere are five predefined main tasks:\n\n| Command             | Description                                                                 | Command                                           |\n| ------------------- | --------------------------------------------------------------------------- | ------------------------------------------------- |\n| `watch`             | Start the file watcher                                                      | `concurrently -r pnpm:watch:*`                    |\n| `dev`               | Build the files once                                                        | `concurrently -r pnpm:dev:*`                      |\n| `build`             | Build the files once for production (with optimzed file size)               | `concurrently -r pnpm:build:*`                    |\n| `pipeline`          | Run install, and build the files for production                             | `pnpm install;concurrently -r pnpm:pipeline:*`    |\n| `showConfig`        | Shows the merged configuration from [`pipeline.yaml`] and [`defaults.yaml`] | `node Build/Carbon.Pipeline/showConfig.mjs`       |\n| `setPackageManager` | [Set your package manager.]                                                 | `node Build/Carbon.Pipeline/setPackageManager.js` |\n\nThe tasks are split up, so they can run in parallel mode. But you can also run them separately:\n\n| Command          | Description                                                   | Command                                               |\n| ---------------- | ------------------------------------------------------------- | ----------------------------------------------------- |\n| `watch:js`       | Start the file watcher for JavaScript files                   | `node Build/Carbon.Pipeline/esbuild.mjs --watch`      |\n| `watch:css`      | Start the file watcher for CSS files                          | `node Build/Carbon.Pipeline/postcss.mjs --watch`      |\n| `dev:js`         | Build the files once for JavaScript files                     | `node Build/Carbon.Pipeline/esbuild.mjs`              |\n| `dev:css`        | Build the files once for CSS files                            | `node Build/Carbon.Pipeline/postcss.mjs`              |\n| `build:js`       | Build the JavaScript files once for production                | `node Build/Carbon.Pipeline/esbuild.mjs --production` |\n| `build:css`      | Build the CSS files once for production                       | `node Build/Carbon.Pipeline/postcss.mjs --production` |\n| `pipeline:build` | Build the files once for production (with optimzed file size) | `concurrently -r pnpm:build:*`                        |\n\n### Extendibility\n\nOf course, you can also add your own tasks in the `scripts` section of your `package.json` file. For example, if you have a Neos UI custom editor and want to start all your tasks in one place, you can add them like this:\n\n```json\n{\n  \"build:editor\": \"pnpm --dir DistributionPackages/Foo.Editor/Resources/Private/Editor/ build\",\n  \"watch:editor\": \"pnpm --dir DistributionPackages/Foo.Editor/Resources/Private/Editor/ watch\",\n  \"pipeline:editor\": \"pnpm --dir DistributionPackages/Foo.Editor/Resources/Private/Editor/ install\"\n}\n```\n\n\u003e Be aware that you may have different syntax for settings options based on the chosen task manager\n\u003e To set the current work directory, for example you have to set `--cwd` for `yarn`, `--dir` or `-C` for `pnpm` and `--prefix` for `npm`.\n\nBecause the tasks start with `build:`, respectively with `watch:` or `pipeline:`, the tasks will be included in the corresponding root command. In this example, `build`, `watch` or `pipeline`. If you want to go crazy, you can even mix different task managers.\n\n## Compression of files\n\nIn production mode (`build`), the files also get compressed with [gzip] and [brotli]. You can edit the compression level under the key [`buildDefaults.compression`]. Per default, the highest compression level is set. To disable compression at all, you can set it to `false`:\n\n```yaml\nbuildDefaults:\n  compression: false\n```\n\nOr, if you want to disable just one of them, you can set the entry to `false`:\n\n```yaml\nbuildDefaults:\n  compression:\n    gzip: false\n```\n\n## Import files from DistributionPackages and other Packages\n\nBy default, two aliases are predefined: `DistributionPackages` and `Packages`. Like that you can import (CSS and JS) files from other packages like that:\n\n```js\nimport \"DistributionPackages/Vendor.Foo/Resources/Private/Fusion/Main\";\nimport \"Packages/Plugins/Jonnitto.PhotoSwipe/Resources/Private/Assets/PhotoSwipe\";\n```\n\n```css\n@import \"DistributionPackages/Vendor.Foo/Resources/Private/Fusion/Main.pcss\";\n@import \"Packages/Carbon/Carbon.Image/Resources/Private/Assets/Tailwind.pcss\";\n```\n\nThanks to a custom made `resolve` function, you can also use [globbing][glob] in CSS imports: `@import \"Presentation/**/*.pcss\";`\n\n## Alter the configuration file\n\nIn some setups, you may need multiple configurations with different config files. In this edge case, you can set a other config file in your `scripts` section in your `package.json` file:\n\n```json\n{\n  \"build:custom:css\": \"node Build/Carbon.Pipeline/postcss.mjs --configFile=pipelineCustom.yaml\"\n}\n```\n\nIn this example, `pipelineCustom.yaml` gets used instead of `pipeline.yaml`.\n\n## CSS\n\n### Sass\n\nIf you want to use [Sass] (`.scss`or `.sass` files) you have to install [`sass`] and [`node-sass-tilde-importer`]:\n\nFor [pnpm]:\n\n```bash\npnpm add -D sass node-sass-tilde-importer\n```\n\nFor [Yarn]:\n\n```bash\nyarn add --dev sass node-sass-tilde-importer\n```\n\nFor [npm]:\n\n```bash\nnpm add -D sass node-sass-tilde-importer\n```\n\nYou have to ways to import files from `node_modules` (Example with bootstrap):\n\n```css\n@import \"node_modules/bootstrap/scss/bootstrap\";\n@import \"~bootstrap/scss/bootstrap\";\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePass options to the sass compiler\u003c/strong\u003e\u003c/summary\u003e\n\nYou can pass options to the sass compiler with `sassOptions`.\n\n**Example**:\nTo silence warnings from stylesheets loaded through importers and load paths, you can enable `quietDeps`:\n\n```yaml\nsassOptions:\n  quietDeps: true\n```\n\n\u003c/details\u003e\n\n### PostCSS\n\nThis template comes with a variety of PostCSS Plugins. Feel free to remove some or add your own favorite packages. The configuration is located in [`.postcssrc.mjs`]. The suffix of these files should be `.pcss`.\n\n#### Pass custom options to you PostCSS config file\n\nYou can pass custom options to your PostCSS config file with key `postcssOptions`. In this example, you would access the key `prefix` with `ctx.prefix` in your PostCSS config file (`.postcssrc.mjs`).\n\n```yaml\npostcssOptions:\n  prefix: true\n```\n\n#### Use postcss resolve() function\n\nYou can use `resolve()` in your css/scss files to load resources (eg images) from `Resources/Public` of the package. The path will be resolved at compile-time.\n\n```css\n.my-class {\n  background-image: resolve(\"Images/my-image.jpg\");\n}\n```\n\nresolves to\n\n```css\n.my-class {\n  background-image: url(\"/_Resources/Static/Packages/Your.Package/Images/my-image.jpg\");\n}\n```\n\nIf you choose to order your Packages in DistributionPackages in subfolders, you can add this setting to ensure the paths are correctly rewritten:\n\n```yaml\npostcssOptions:\n  additionalPackagePathPrefixes:\n    - Sites\n    - Plugins\n```\n\nThis ensures that the path that is generated (eg `/_Resources/Static/Packages/(Sites|Plugins)/Your.Package/.../`) will be correctly resolved, removing the subfolder from the path.\n\n#### PostCSS Plugins\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eFollowing plugins are included:\u003c/strong\u003e\u003c/summary\u003e\n\n| Name                         | Description                                                                                                            |\n| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n| [postcss-import]             | Plugin to transform `@import` rules by inlining content. Thanks to a custom `resolve` function you can also use [glob] |\n| [Tailwind CSS]               | A utility-first CSS framework for rapidly building custom user interfaces                                              |\n| [postcss-nested]             | Unwrap nested rules like how Sass does it                                                                              |\n| [postcss-assets]             | Plugin to manage assets                                                                                                |\n| [postcss-sort-media-queries] | Combine and sort CSS media queries                                                                                     |\n| [autoprefixer]               | Parse CSS and add vendor prefixes to CSS rules using values from [Can I Use]                                           |\n| [cssnano]                    | Modern CSS compression                                                                                                 |\n| [postcss-reporter]           | `console.log()` the messages (warnings, etc.) registered by other PostCSS plugins                                      |\n\nOf course, you can add your own or remove not-needed Plugins as you want. This is just meant as a starting point.\n\n\u003c/details\u003e\n\n### Tailwind CSS\n\nThis setup comes with [Tailwind CSS], a highly customizable, low-level CSS framework. An example configuration is provided in [`tailwind.config.mjs`]. The setup for get the content for the CSS files is also configured. [Read more about controlling the file size here][optimizing-for-production]. To remove a specific package, you could use this pattern in your `pipeline.yaml`:\n\n```yaml\nbuildDefaults:\n  content:\n    RemovePacakge: \"!DistributionPackages/Package.ToRemove\"\n```\n\nBy default, following entries are pre-defined:\n\n```yaml\nbuildDefaults:\n  content:\n    DistributionPackages: DistributionPackages/**/(Private|NodeTypes)/**/*.{fusion,html,js,jsx,ts,tsx,mjs,mjsx,mts,mtsx,cjs,cjsx,cts,ctsx,svelte,vue}\n    ignoreNodeModules: \"!DistributionPackages/**/Private/**/node_modules\"\n```\n\nThe script put automatically all entries starting with an `!` at the end of the list. You can control this setting by calling `pnpm showConfig --path=buildDefaults.content`\n\nBy the way: [Alpine.js] is excellent in combination with [Tailwind CSS].\n\n## Javascript\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eFlow Settings in Javascript\u003c/strong\u003e\u003c/summary\u003e\n\nSuppose you use tools like [Flownative.Sentry], you perhaps want to pass some of the settings to your Javascript without setting a `data` attribute somewhere in the markup. For that, you can enable `esbuild.defineFlowSettings`. Just add the path (e.g. `Flownative.Sentry.release`) to the setting. In the background, the command `flow configuration:show` is runned. If you run the command `build`, which automatically has the flag `--production`, the `FLOW_CONTEXT` is set to `Production`.\n\n```yaml\nesbuild:\n  defineFlowSettings: Flownative.Sentry.release\n```\n\n`defineFlowSettings` can be also an array of strings:\n\n```yaml\nesbuild:\n  defineFlowSettings:\n    - Flownative.Sentry.release\n    - Flownative.Sentry.environment\n    - Flownative.Sentry.dsn\n```\n\nEvery entry results into one injected variable.\n\nIn Javascript, you can access the variables like this:\n\n```js\nSentry.init({\n  dsn: FLOW.Flownative.Sentry.dsn,\n  release: FLOW.Flownative.Sentry.release,\n  environment: FLOW.Flownative.Sentry.environment,\n  integrations: [new Integrations.BrowserTracing()],\n});\n```\n\n**Important**\n\nAs some chars are not allowed to be injected as variable keys, the will get replaced:\n\n| Char | Replaced with |\n| :--: | :-----------: |\n| `..` |      `.`      |\n| `-`  |      `_`      |\n| `0`  |    `ZERO`     |\n| `1`  |     `ONE`     |\n| `2`  |     `TWO`     |\n| `3`  |    `THREE`    |\n| `4`  |    `FOUR`     |\n| `5`  |    `FIVE`     |\n| `6`  |     `SIX`     |\n| `7`  |    `SEVEN`    |\n| `8`  |    `EIGHT`    |\n| `9`  |    `NINE`     |\n\nMake sure your [`eslint.config.mjs`] has the global `FLOW` enabled:\n\n```js\nimport globals from \"globals\";\nimport pluginJs from \"@eslint/js\";\nimport prettierRecommended from \"eslint-plugin-prettier/recommended\";\n\nexport default [\n  pluginJs.configs.recommended,\n  prettierRecommended,\n  {\n    ignores: [\"Build/\", \"Packages/\", \"**/Public/\", \"**/Resources/Private/Templates/\", \"*.noLinter.*\"],\n    languageOptions: {\n      globals: {\n        ...globals.browser,\n        ...globals.node,\n        FLOW: \"readonly\",\n      },\n    },\n  },\n];\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePass options to esbuild\u003c/strong\u003e\u003c/summary\u003e\n\nYou can pass options to the [esbuild API] with `esbuild.options`.\n\n**Example**:\nTo remove some functions from the production build, you can use the `esbuild.options.pure` setting. If you have just\none function, you can pass a string; otherwise, you have to set it to an array:\n\n```yaml\nesbuild:\n  options:\n    pure:\n      - console.log\n      - console.pure\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTypeScript\u003c/strong\u003e\u003c/summary\u003e\n\nIf you want to use [TypeScript], just choose the option TypeScript on the composer installation\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eReact\u003c/strong\u003e\u003c/summary\u003e\n\nUsing JSX syntax usually requires you to manually import the JSX library you are using. For example, if you are using [React], by default, you will need to import React into each JSX file like this:\n\n```js\nimport * as React from \"react\";\nrender(\u003cdiv /\u003e);\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePreact\u003c/strong\u003e\u003c/summary\u003e\n\nIf you're using JSX with a library other than React (such as [Preact],), you'll likely need to configure the [JSX factory] and [JSX fragment] settings since they default to `React.createElement`and `React.Fragment` respectively. Add this to your `tsconfig.json` or `jsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsxFactory\": \"h\",\n    \"jsxFragmentFactory\": \"Fragment\"\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSvelte\u003c/strong\u003e\u003c/summary\u003e\n\nIf you want to use [Svelte], add the following packages to `package.json`:\n\nFor [pnpm]:\n\n```bash\npnpm add -D svelte svelte-preprocess esbuild-svelte @tsconfig/svelte\n```\n\nFor [Yarn]:\n\n```bash\nyarn add --dev svelte svelte-preprocess esbuild-svelte @tsconfig/svelte\n```\n\nFor [npm]:\n\n```bash\nnpm add -D svelte svelte-preprocess esbuild-svelte @tsconfig/svelte\n```\n\nEnable the plugin in your [`pipeline.yaml`] file:\n\n```yaml\nesbuild:\n  plugins:\n    svelte:\n      enable: true\n      # Name of the esbuild plugin for svelte\n      # plugin: esbuild-svelte\n      # Name of the preprocess plugin\n      # preprocess: svelte-preprocess\n      # Add here your options\n      options:\n        compilerOptions:\n          # external or injected\n          css: external\n```\n\n\u003e You can also configure the esbuild plugin and preprocess package, which should be used. Just add a key `plugin` or `preprocess` and the plugin name.\n\nYour `tsconfig.json` may look like this:\n\n```json\n{\n  \"extends\": \"@tsconfig/svelte/tsconfig.json\",\n  \"include\": [\"DistributionPackages/**/Private/*\"],\n  \"exclude\": [\n    \"node_modules/*\",\n    \"__sapper__/*\",\n    \"DistributionPackages/**/Public/*\",\n    \"DistributionPackages/**/Private/Templates/InlineAssets*\",\n    \"Packages\"\n  ],\n  \"compilerOptions\": {\n    \"baseUrl\": \"./\",\n    \"paths\": {\n      \"Packages/*\": [\"Packages/*\"],\n      \"DistributionPackages/*\": [\"DistributionPackages/*\"]\n    }\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eVue.js\u003c/strong\u003e\u003c/summary\u003e\n\nIf you want to use [Vue.js], add the following packages to `package.json`:\n\nFor [pnpm]:\n\n```bash\npnpm add -D vue esbuild-plugin-vue3\n```\n\nFor [Yarn]:\n\n```bash\nyarn add --dev vue esbuild-plugin-vue3\n```\n\nFor [npm]:\n\n```bash\nnpm add -D vue esbuild-plugin-vue3\n```\n\nEnable the plugin in your [`pipeline.yaml`] file:\n\n```yaml\nesbuild:\n  plugins:\n    vue:\n      enable: true\n      # Name of the esbuild plugin for Vue\n      # plugin: esbuild-plugin-vue3\n      # You can pass your needed options here\n      # options:\n```\n\n\u003e You can also configure the esbuild plugin, which should be used. Just add a key `plugin` and add the plugin name.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eBabel.js / IE 11 support\u003c/strong\u003e\u003c/summary\u003e\n\nIf you want to use [Babel.js], add the following packages to `package.json`:\n\nFor [pnpm]:\n\n```bash\npnpm add -D @babel/core esbuild-plugin-babel\n```\n\nFor [Yarn]:\n\n```bash\nyarn add --dev @babel/core esbuild-plugin-babel\n```\n\nFor [npm]:\n\n```bash\nnpm add -D @babel/core esbuild-plugin-babel\n```\n\nas well as additonals babel plugins and/or presets like `@babel/preset-env`, `@babel/plugin-proposal-class-properties`, `@babel/plugin-proposal-object-rest-spread`\n\nFurther, you have to add a file called `babel.config.json`, for example:\n\n```json\n{\n  \"presets\": [\n    [\n      \"@babel/preset-env\",\n      {\n        \"modules\": false\n      }\n    ]\n  ],\n  \"plugins\": [\"@babel/proposal-class-properties\", \"@babel/proposal-object-rest-spread\"]\n}\n```\n\nFinally, enable the plugin in your [`pipeline.yaml`] file:\n\n```yaml\nesbuild:\n  plugins:\n    babel:\n      enable: true\n      # You can pass your needed options here\n      # options:\n```\n\nAs the `ENV` variable is set to `development` or `production` if you run the tasks, you can have different setups (For example remove `console` commands with [`babel-plugin-transform-remove-console`] on `production`):\n\n```json\n{\n  \"env\": {\n    \"development\": {\n      \"presets\": [\n        [\n          \"@babel/preset-env\",\n          {\n            \"modules\": false\n          }\n        ]\n      ],\n      \"plugins\": [\"@babel/proposal-class-properties\", \"@babel/proposal-object-rest-spread\"]\n    },\n    \"production\": {\n      \"presets\": [\n        [\n          \"@babel/preset-env\",\n          {\n            \"modules\": false\n          }\n        ]\n      ],\n      \"plugins\": [\"@babel/proposal-class-properties\", \"@babel/proposal-object-rest-spread\", \"transform-remove-console\"]\n    }\n  }\n}\n```\n\nIf you are a poor person and have to support Internet Explorer, you must edit your `.browserslistrc`.\nIf a browser starting with `ie` is found, the target `es5` gets activated.\n\n```\ndefaults\nie 11\nnot dead\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003cstrong\u003eAdditional esbuild plugins\u003c/strong\u003e\u003c/summary\u003e\n\nYou can also add additional [esbuild] plugins, for example [`esbuild-envfile-plugin`]:\n\n```yaml\nesbuild:\n  additionalPlugins:\n    esbuild-envfile-plugin:\n      functionName: setup\n      options: null\n```\n\nAs the plugin returns not the function directly (like others), you also have to pass the function's name.\nIf a plugin returns the function directly, you don't have to set this. If you want to enable such a plugin without any options, you can just pass `name-of-the-plugin: true`\n\n\u003c/details\u003e\n\n## Live-Reloading\n\nIf you want to use live reloading, you can do this with [Browsersync].\n\nTo install it run `pnpm add --global browser-sync`, `yarn global add browser-sync`, or `npm install -g browser-sync`.\n\nThen you have to create an initial config with `browser-sync init`.\nAfter that, you need to adjust the created `bs-config.js` file.\nYou can adjust every parameter, but the two parameter you need to set is `files` and `proxy`:\n\n```js\nmodule.exports = {\n  files: [\"DistributionPackages/**/Public/**/*.css\", \"DistributionPackages/**/Public/**/*.js\"],\n  proxy: \"http://your.local.domain\",\n};\n```\n\nIf you want to also reload the page if a `fusion` or a template file gets changed, you can do so:\n\n```js\nmodule.exports = {\n  files: [\n    \"DistributionPackages/**/Public/**/*.css\",\n    \"DistributionPackages/**/Public/**/*.js\",\n    \"DistributionPackages/**/Private/**/*.fusion\",\n    \"DistributionPackages/**/Private/**/*.html\",\n  ],\n  proxy: \"http://your.local.domain\",\n};\n```\n\nMake sure you set the correct proxy with the corresponding protocol (`https://` or `http://`), depending on your setup. To create a better overview of the parameter, you can delete the not changed values from the file.\n\nTo start Browsersync you can run `browser-sync start --config bs-config.js`. If you want to start it together with `watch`, you can add the following line into the `scripts` section:\n\n```json\n{\n  \"watch:browsersync\": \"browser-sync start --config bs-config.js\"\n}\n```\n\n[packagist]: https://packagist.org/packages/carbon/pipeline\n[latest stable version]: https://poser.pugx.org/carbon/pipeline/v/stable\n[esbuild]: https://esbuild.github.io\n[postcss]: https://postcss.org\n[open an issue]: https://github.com/CarbonPackages/Carbon.Pipeline/issues/new\n[composer]: https://getcomposer.org\n[`pipeline.yaml`]: RootFiles/Global/pipeline.yaml\n[`defaults.yaml`]: defaults.yaml\n[`builddefaults.compression`]: defaults.yaml#L31-L33\n[esbuild format]: https://esbuild.github.io/api/#format\n[esbuild api]: https://esbuild.github.io/api/\n[github issues]: https://img.shields.io/github/issues/CarbonPackages/Carbon.Pipeline\n[issues]: https://github.com/CarbonPackages/Carbon.Pipeline/issues\n[github forks]: https://img.shields.io/github/forks/CarbonPackages/Carbon.Pipeline\n[network]: https://github.com/CarbonPackages/Carbon.Pipeline/network\n[github stars]: https://img.shields.io/github/stars/CarbonPackages/Carbon.Pipeline\n[stargazers]: https://github.com/CarbonPackages/Carbon.Pipeline/stargazers\n[github license]: https://img.shields.io/github/license/CarbonPackages/Carbon.Pipeline\n[license]: LICENSE\n[twitter]: https://img.shields.io/twitter/url?url=https%3A%2F%2Fgithub.com%2FCarbonPackages%2FCarbon.Pipeline\n[tweet]: https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fgithub.com%2FCarbonPackages%2FCarbon.Pipeline\n[sponsor @jonnitto on github]: https://img.shields.io/badge/sponsor-Support%20this%20package-informational\n[sponsor]: https://github.com/sponsors/jonnitto\n[github watchers]: https://img.shields.io/github/watchers/CarbonPackages/Carbon.Pipeline.svg\n[subscription]: https://github.com/CarbonPackages/Carbon.Pipeline/subscription\n[download]: https://img.shields.io/badge/download-Download%20as%20zip-informational\n[main.zip]: https://github.com/CarbonPackages/Carbon.Pipeline/archive/main.zip\n[neos cms]: https://www.neos.io\n[npm]: https://www.npmjs.com\n[yarn]: https://yarnpkg.com\n[pnpm]: https://pnpm.io\n[`eslint.config.mjs`]: RootFiles/JavaScript/eslint.config.mjs\n[`.postcssrc.mjs`]: RootFiles/Global/.postcssrc.mjs\n[tailwind css]: https://tailwindcss.com\n[alpine.js]: https://github.com/alpinejs/alpine\n[`tailwind.config.mjs`]: RootFiles/Global/tailwind.config.mjs\n[optimizing-for-production]: https://tailwindcss.com/docs/optimizing-for-production\n[sass]: https://sass-lang.com\n[`sass`]: https://www.npmjs.com/package/sass\n[`node-sass-tilde-importer`]: https://www.npmjs.com/package/node-sass-tilde-importer\n[postcss-import]: https://www.npmjs.com/package/postcss-import\n[postcss-nested]: https://www.npmjs.com/package/postcss-nested\n[postcss-assets]: https://www.npmjs.com/package/postcss-assets\n[postcss-sort-media-queries]: https://www.npmjs.com/package/postcss-sort-media-queries\n[autoprefixer]: https://www.npmjs.com/package/autoprefixer\n[can i use]: https://caniuse.com\n[cssnano]: https://cssnano.co\n[postcss-reporter]: https://www.npmjs.com/package/postcss-reporter\n[glob]: https://www.npmjs.com/package/glob\n[typescript]: https://www.typescriptlang.org\n[react]: https://reactjs.org\n[preact]: https://preactjs.com\n[svelte]: https://svelte.dev\n[vue.js]: https://vuejs.org\n[babel.js]: https://babeljs.io\n[flownative.sentry]: https://github.com/flownative/flow-sentry\n[`babel-plugin-transform-remove-console`]: https://www.npmjs.com/package/babel-plugin-transform-remove-console\n[`esbuild-envfile-plugin`]: https://www.npmjs.com/package/esbuild-envfile-plugin\n[jsx factory]: https://esbuild.github.io/api/#jsx-factory\n[jsx fragment]: https://esbuild.github.io/api/#jsx-fragment\n[external]: https://esbuild.github.io/api/#external\n[brotli]: https://github.com/google/brotli\n[gzip]: https://nodejs.org/api/zlib.html\n[browsersync]: https://browsersync.io/\n[Set your package manager.]: #choose-a-package-manager\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbonpackages%2Fcarbon.pipeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarbonpackages%2Fcarbon.pipeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbonpackages%2Fcarbon.pipeline/lists"}