Adding JS files

Since there are different ways to include JavaScript files in HTML, the configuration can be a bit more complex.

The simplest way is to add one file:

{
	"assets": {
		"js": "src/index.js"
	}
}

This would include one JS file, no matter what NODE_ENV you use.

If you want to serve different files per NODE_ENV, you can do that like this:

{
	"assets": {
		"js": {
			"development": "src/index.js",
			"production": "dist/index.js"
		}
	}
}

In both cases you could also use an array in case you want to serve multiple files:

{
	"assets": {
		"js": ["src/index.js", "src/another-file.js"]
	}
}

{
	"assets": {
		"js": {
			"development": ["src/index.js", "src/another-file.js"],
			"production": ["dist/index.js", "dist/another-file.js"]
		}
	}
}

In any of these case, the JavaScript files are included with a render blocking script tag in the head:

<head>
  <script src="src/index.js">
</head>

In case you want to use async, defer, type="module" or include the script right before the closing </body> tag, you can use an object like this:

{
	"src": "src/index.js",
	"async": true,
	"defer": true,
	"type": "module",
	"position": "body"
}

This object can be used for any of the previously mentioned examples to replace the file path string, for example:

{
	"assets": {
		"js": {
			"src": "src/index.js",
			"async": true,
			"defer": true,
			"type": "module",
			"position": "body"
		}
	}
}

{
	"assets": {
		"js": {
			"development": [
				{
					"src": "src/index.js",
					"async": true,
					"defer": true,
					"type": "module",
					"position": "body"
				}
			],
			"production": []
		}
	}
}

Please note that the object just mentioned does not make much sense, but merely shows the possible options. The default values are:

{
	"src": null,
	"async": false,
	"defer": false,
	"type": null,
	"position": "head"
}