Webpack external dependencies

1

I’m using Aurelia with webpack and import a json file using TypeScript’s resolveJSONModule compiler option as follow

{
“compilerOptions”: {
“resolveJsonModule”: true,
“esModuleInterop”: true
}
}.
In my TypeScript starts
import myJSON from ‘./someData.json’

This is great so far, however, I want the json file to be an external dependency, that is not bundle it. This is so I can amend the file with various settings in my CI/CD process outside of using the environment.ts file.
My desired behaviour works without any further changes in Angular but there doesn’t seem to be a clear way in Aurelia.
Can anyone tell me how to go about setting up Webpack to do as I want, thanks?

1 Like
2

In your code, i guess it’s like this:

import jsonData from 'path/to/my.json'

handle(jsonData)

You can change it to

fetch('/path/to/my.json')
  .then(response => response.json())
  .then(jsonDta => {
    // do your stuff here
  })
3

Thank you, I shall try it. Is there a way without making an asynchronous call to get the json file?

1 Like
4

It depends on how you define “external”. As long as it’s known as build time, by webpack, you can avoid making an async call. Otherwise, I think no.

5

I was using the Webpack terminology external dependency for a file that is not bundled. In my case I want the json file to be treated like a static file from which I can retrieve its contents elsewhere in the app.

1 Like
6

It’s still unclear to me if the json file will be available by the time you run au build --env prod. Will it be available? If so, you can employ aliasing with Webpack, otherwise, you will have to get it via fetch call

7

Yes, the file will be available when au build is ran. The release process will alter it contents just before being deployed.
Thanks again.

1 Like