Our team develops a bunch of JavaScript browser apps. These apps share functionality (core) and Web Components (shared). The folder structure is:
/apps
/app-1
/app-2
...
/core
/shared
Each folder contains a src
folder.
Considering using snowpack in the folder app-1
I want to reference js files in /core/src
or /shared/src
both for development (using snowpack dev
) and packaging (using snowpack build
)
What I tried:
Step 1: I used paths like this: ../../core/src/router.js
. This didn't work, maybe because the resources were outside of the webroot of the test server (snowpack dev
).
Step 2: I created two symlinks:
apps/app-1/src/@core -> ../../../core/src
apps/app-1/src/@shared -> ../../../shared/src
Now the local server found all the resources. The build process however found only those files, that were direct children of core/src
or shared/src
, but not any file within a subfolder as e.g. shared/src/component/filter.js
.
Any ideas or thoughts?
Appendix
The snowpack.config.json
of app-1:
{
"devOptions": {
"port": 8082,
"open": "none"
},
"mount": {
"public": "/",
"src": "/_dist_"
},
"plugins": [
"@snowpack/plugin-babel",
"@snowpack/plugin-dotenv",
"@snowpack/plugin-sass"
]
}
Example for import in app-1/src/handler
:
import { loadRoute } from '../@core/router' // works fine
import '../@shared/component/filter' // does not work
// or:
import { loadRoute } from '../@core/router.js' // works fine, too
import '../@shared/component/filter.js' // does not work neither
Summary. Snowpack is a modern, lightweight build tool for faster web development. Traditional JavaScript build tools like webpack and Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file.
Snowpack is a package installed from npm. Create a package.json file in your project directory to manage your dependencies. Run this command in your project to create a simple, empty package.json : npm init. 💡 Tip: In a hurry?
You can solve your problem just adding:
workspaceRoot: '..',
to your snowpack.config.js
file.
Basically it tells snowpack to process everything from the parent folder (..
) through it's pipeline. It will pick up dependencies and process everything.
In your case, you could import files from shared
in app-1
by using relative paths, and without creating any symlinks:
import something from '../shared/something';
You can find more about workspaceRoot
property in snowpack's documentation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With