mirror of
https://github.com/gohugoio/hugo.git
synced 2025-05-02 00:20:21 +03:00
Merge commit '346b60358d
'
This commit is contained in:
commit
43307b07f8
384 changed files with 3305 additions and 3271 deletions
|
@ -32,12 +32,10 @@ The Batch `ID` is used to create the base directory for this batch. Forward slas
|
|||
* [Config]
|
||||
* [SetOptions]
|
||||
|
||||
|
||||
## Group
|
||||
|
||||
The `Group` method take an `ID` (`string`) as argument. No slashes. It returns an object with these methods:
|
||||
|
||||
|
||||
#### Script
|
||||
|
||||
The `Script` method takes an `ID` (`string`) as argument. No slashes. It returns an [OptionsSetter] that can be used to set [script options] for this script.
|
||||
|
@ -70,7 +68,6 @@ The `Instance` method takes two `string` arguments `SCRIPT_ID` and `INSTANCE_ID`
|
|||
|
||||
`SetOptions` takes a [params options] map. The instance options will be passed to any [runner] script in the same group, as JSON.
|
||||
|
||||
|
||||
#### Runner
|
||||
|
||||
The `Runner` method takes an `ID` (`string`) as argument. No slashes. It returns an [OptionsSetter] that can be used to set [script options] for this runner.
|
||||
|
@ -129,7 +126,6 @@ The runner script's export must be a function that takes one argument, the group
|
|||
|
||||
Below is an example of a runner script that uses React to render elements. Note that the export (`default`) must match the `export` option in the [script options] (`default` is the default value for runner scripts) (runnable versions of examples on this page can be found at [js.Batch Demo Repo]):
|
||||
|
||||
|
||||
```js
|
||||
import * as ReactDOM from 'react-dom/client';
|
||||
import * as React from 'react';
|
||||
|
@ -154,13 +150,11 @@ export default function Run(group) {
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Config
|
||||
|
||||
Returns an [OptionsSetter] that can be used to set [build options] for the batch.
|
||||
|
||||
These are mostly the same as for [js.Build], but note that:
|
||||
These are mostly the same as for `js.Build`, but note that:
|
||||
|
||||
* `targetPath` is set automatically (there may be multiple outputs).
|
||||
* `format` must be `esm`, currently the only format supporting [code splitting].
|
||||
|
@ -233,7 +227,7 @@ Hugo will, by default, first try to resolve any import in [assets](/hugo-pipes/i
|
|||
|
||||
You can pass any object that implements [Resource.Get](/methods/page/resources/#get). Pass a slice to set multiple contexts.
|
||||
|
||||
The example above uses [`Resources.Mount`] to resolve a folder inside `assets` relative to the page bundle.
|
||||
The example above uses [`Resources.Mount`] to resolve a directory inside `assets` relative to the page bundle.
|
||||
|
||||
### OptionsSetter
|
||||
|
||||
|
@ -283,7 +277,6 @@ See [this discussion](https://discourse.gohugo.io/t/js-batch-with-simple-global-
|
|||
{{ end }}
|
||||
```
|
||||
|
||||
|
||||
## Known Issues
|
||||
|
||||
In the official documentation for [ESBuild's code splitting], there's a warning note in the header. The two issues are:
|
||||
|
@ -294,7 +287,7 @@ In the official documentation for [ESBuild's code splitting], there's a warning
|
|||
We have not seen the ordering issue as a problem during our [extensive testing](https://github.com/bep/hugojsbatchdemo) of this new feature with different libraries. There are two main cases:
|
||||
|
||||
1. Undefined execution order of imports, see [this comment](https://github.com/evanw/esbuild/issues/399#issuecomment-1458680887)
|
||||
2. Only one execution order of imports, see [this comment](https://github.com/evanw/esbuild/issues/399#issuecomment-735355932)
|
||||
1. Only one execution order of imports, see [this comment](https://github.com/evanw/esbuild/issues/399#issuecomment-735355932)
|
||||
|
||||
Many would say that both of the above are [code smells](https://en.wikipedia.org/wiki/Code_smell). The first one has a simple workaround in Hugo. Define the import order in its own script and make sure it gets passed early to ESBuild, e.g. by putting it in a script group with a name that comes early in the alphabet.
|
||||
|
||||
|
@ -307,7 +300,7 @@ console.log('entrypoints-workaround.js');
|
|||
```
|
||||
|
||||
[build options]: #build-options
|
||||
[`Resource`]: https://gohugo.io/methods/resource/
|
||||
[`Resource`]: /methods/resource/
|
||||
[`Resources`]: /methods/page/resources/
|
||||
[`Resources.Mount`]: /methods/page/resources/#mount
|
||||
[`templates.Defer`]: /functions/templates/defer/
|
||||
|
@ -319,13 +312,12 @@ console.log('entrypoints-workaround.js');
|
|||
[instance]: #instance
|
||||
[JavaScript import]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
|
||||
[js.Batch Demo Repo]: https://github.com/bep/hugojsbatchdemo/
|
||||
[js.Build]: https://gohugo.io/hugo-pipes/js/#options
|
||||
[map]: https://gohugo.io/functions/collections/dictionary/
|
||||
[map]: /functions/collections/dictionary/
|
||||
[OptionsSetter]: #optionssetter
|
||||
[page bundles]: https://gohugo.io/content-management/page-bundles/
|
||||
[page bundles]: /content-management/page-bundles/
|
||||
[params options]: #params-options
|
||||
[runner]: #runner
|
||||
[script options]: #script-options
|
||||
[script]: #script
|
||||
[SetOptions]: #optionssetter
|
||||
[with]: https://gohugo.io/functions/go-template/with/
|
||||
[with]: /functions/go-template/with/
|
||||
|
|
|
@ -51,7 +51,7 @@ format
|
|||
|
||||
{{% include "./_common/options.md" %}}
|
||||
|
||||
### Import JS code from /assets
|
||||
### Import JS code from the assets directory
|
||||
|
||||
`js.Build` has full support for the virtual union file system in [Hugo Modules](/hugo-modules/). You can see some simple examples in this [test project](https://github.com/gohugoio/hugoTestProjectJSModImports), but in short this means that you can do this:
|
||||
|
||||
|
@ -79,7 +79,7 @@ For other files (e.g. `JSON`, `CSS`) you need to use the relative path including
|
|||
import * as data from 'my/module/data.json';
|
||||
```
|
||||
|
||||
Any imports in a file outside `/assets` or that does not resolve to a component inside `/assets` will be resolved by [ESBuild](https://esbuild.github.io/) with the **project directory** as the resolve directory (used as the starting point when looking for `node_modules` etc.). Also see [hugo mod npm pack](/commands/hugo_mod_npm_pack/). If you have any imported npm dependencies in your project, you need to make sure to run `npm install` before you run `hugo`.
|
||||
Any imports in a file outside `assets` or that does not resolve to a component inside `assets` will be resolved by [ESBuild](https://esbuild.github.io/) with the **project directory** as the resolve directory (used as the starting point when looking for `node_modules` etc.). Also see [hugo mod npm pack](/commands/hugo_mod_npm_pack/). If you have any imported npm dependencies in your project, you need to make sure to run `npm install` before you run `hugo`.
|
||||
|
||||
Also note the new `params` option that can be passed from template to your JS files, e.g.:
|
||||
|
||||
|
@ -98,9 +98,9 @@ Hugo will, by default, generate a `assets/jsconfig.json` file that maps the impo
|
|||
|
||||
Use the `js.Build` function to include Node.js dependencies.
|
||||
|
||||
Any imports in a file outside `/assets` or that does not resolve to a component inside `/assets` will be resolved by [esbuild](https://esbuild.github.io/) with the **project directory** as the resolve directory (used as the starting point when looking for `node_modules` etc.). Also see [hugo mod npm pack](/commands/hugo_mod_npm_pack/). If you have any imported npm dependencies in your project, you need to make sure to run `npm install` before you run `hugo`.
|
||||
Any imports in a file outside `assets` or that does not resolve to a component inside `assets` will be resolved by [esbuild](https://esbuild.github.io/) with the **project directory** as the resolve directory (used as the starting point when looking for `node_modules` etc.). Also see [hugo mod npm pack](/commands/hugo_mod_npm_pack/). If you have any imported npm dependencies in your project, you need to make sure to run `npm install` before you run `hugo`.
|
||||
|
||||
The start directory for resolving npm packages (aka. packages that live inside a `node_modules` folder) is always the main project folder.
|
||||
The start directory for resolving npm packages (aka. packages that live inside a `node_modules` directory) is always the main project directory.
|
||||
|
||||
{{% note %}}
|
||||
If you're developing a theme/component that is supposed to be imported and depends on dependencies inside `package.json`, we recommend reading about [hugo mod npm pack](/commands/hugo_mod_npm_pack/), a tool to consolidate all the npm dependencies in a project.
|
||||
|
|
|
@ -14,7 +14,7 @@ And then in your JS file:
|
|||
import * as params from '@params';
|
||||
```
|
||||
|
||||
Note that this is meant for small data sets, e.g. configuration settings. For larger data, please put/mount the files into `/assets` and import them directly.
|
||||
Note that this is meant for small data sets, e.g. configuration settings. For larger data, please put/mount the files into `assets` and import them directly.
|
||||
|
||||
minify
|
||||
: (`bool`)Let `js.Build` handle the minification.
|
||||
|
@ -74,7 +74,6 @@ sourceMap
|
|||
sourcesContent {{< new-in 0.140.0 >}}
|
||||
: (`bool`) Whether to include the content of the source files in the source map. By default, this is `true`.
|
||||
|
||||
|
||||
JSX {{< new-in 0.124.0 >}}
|
||||
: (`string`) How to handle/transform JSX syntax. One of: `transform`, `preserve`, `automatic`. Default is `transform`. Notably, the `automatic` transform was introduced in React 17+ and will cause the necessary JSX helper functions to be imported automatically. See https://esbuild.github.io/api/#jsx
|
||||
|
||||
|
@ -96,4 +95,4 @@ const App = () => <>Hello world!</>;
|
|||
|
||||
const container = document.getElementById('app');
|
||||
if (container) render(<App />, container);
|
||||
```
|
||||
```
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue