diff options
-rw-r--r-- | doc/development.md | 26 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | rollup.config.js | 1 |
3 files changed, 22 insertions, 6 deletions
diff --git a/doc/development.md b/doc/development.md index 8dbc9abd..8f39d026 100644 --- a/doc/development.md +++ b/doc/development.md @@ -44,14 +44,28 @@ We can then loop over the `versions` array with something like: Note that the data file must have the `yaml` extension (not `yml`) and that we reference the array with a symbol (`:versions`). -## Modern JavaScript +## JavaScript -A lot of the JavaScript can be found in [`content/assets/javascripts/`](https://gitlab.com/gitlab-org/gitlab-docs/-/tree/main/content/assets/javascripts/content/assets/javascripts). -The files in this directory are handcrafted `ES5` JavaScript files. +[Rollup](https://rollupjs.org/) is used on this project to bundle JavaScript into modules. See [rollup.config.js](../rollup.config.js) for configuration details. -We've [recently introduced](https://gitlab.com/gitlab-org/gitlab-docs/merge_requests/577) -the ability to write modern JavaScript. All modern JavaScript should be added to -the [content/frontend/](https://gitlab.com/gitlab-org/gitlab-docs/-/tree/main/content/frontend) directory. +All new JavaScript should be added to the [content/frontend/](https://gitlab.com/gitlab-org/gitlab-docs/-/tree/main/content/frontend) directory. + +Legacy JavaScript can be found in [`content/assets/javascripts/`](https://gitlab.com/gitlab-org/gitlab-docs/-/tree/main/content/assets/javascripts/content/assets/javascripts). +The files in this directory are handcrafted `ES5` JavaScript files. Work is [ongoing](https://gitlab.com/gitlab-org/gitlab-docs/-/issues/439) to modernize these files. + +### Development using Rollup watch mode + +If you're working with files within the `/content/frontend/` directory, you can speed up compile time by using +[Rollup's `watch` mode](https://rollupjs.org/command-line-interface/#w-watch). This generates a new bundle when any of +the files in `/content/frontend/` are changed on disk. + +To start Rollup in watch mode, run: + +```shell +yarn watch +``` + +Changes made outside of the `/content/frontend/` directory require a full `make compile` to be previewable. ### Add a new bundle diff --git a/package.json b/package.json index b268e5ee..615ac8fa 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "main": "public/index.js", "scripts": { "bundle": "if [ -z $ROLLUP_OPTIONS ]; then echo INFO: ROLLUP_OPTIONS is not set; else echo INFO: ROLLUP_OPTIONS = ${ROLLUP_OPTIONS}; fi && rollup --config rollup.config.js ${ROLLUP_OPTIONS}", + "watch": "rollup --config rollup.config.js --watch", "test": "jest", "eslint": "eslint --max-warnings 0 --ext .js,.vue .", "prettier": "prettier --check '**/*.{js,vue,json}'", diff --git a/rollup.config.js b/rollup.config.js index e928db76..2f3cab35 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -22,6 +22,7 @@ module.exports = glob.sync('content/frontend/**/*.js').map((file) => ({ format: 'iife', name: file, }, + cache: true, plugins: [ nodeResolve({ browser: true, preferBuiltins: false }), commonjs({ |