Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

snowpack: reference files outside of project folder

Tags:

snowpack

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)

  1. is this possible?
  2. are there best practices how to achieve this?
  3. are there examples for such a situation (or a similar one)

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
like image 308
Filchos Avatar asked Nov 25 '20 13:11

Filchos


People also ask

What is snowpack file?

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.

What is snowpack NPM?

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?


1 Answers

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.

like image 53
Stanko Avatar answered Oct 03 '22 06:10

Stanko