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