typescript - NUXT Χρήση κοινών στυλ και σεναρίων εκτός της τοποθεσίας του έργου

Σχεδιάζω να μοιραστώ κώδικα μεταξύ 2 έργων NUXT, συγκεκριμένα του CMS UI και του δημόσιου UI. Τα αρχεία μου μοιάζουν κάπως έτσι:

repo
|- shared
|  |- sass
|  |  `- main.sass
|  `- ts
|     `- test.ts
|- public (NUXT project)
|  |- ...
|  |- nuxt.config.js
|  `- tsconfig.json
`- cms (NUXT project)

Έχω ορίσει alias για το webpack και css στο nuxt.config.js όπως εξής:

css: ['Shared/sass/main.sass'],
build: {
  extend(config, ctx) {
    config.resolve = config.resolve || {}
    config.resolve.alias = config.resolve.alias || {}
    config.resolve.alias.Shared = path.resolve(__dirname, '../shared')
  }
}

καθώς και τη διαδρομή TypeScript στο tsconfig.json:

"paths": {
  "~/*": [
    "./*"
  ],
  "@/*": [
    "./*"
  ],
  "Shared/*": [
     "../shared/*"
  ]
},

Ωστόσο, όταν προσπαθώ πραγματικά να εκτελέσω nuxt ή import {test} from 'Shared/ts/test', φαίνεται ότι δεν μπορούν να επιλύσουν τα μονοπάτια.

Σφάλμα CSS:

 ERROR  Could not compile template xxx\\repo\\public\\node_modules\\@nuxt\\vue-app\\template\\App.js: Cannot resolve "Shared/sass/main.sass" from "xxx\repo\public\Shared\sass\main.sass"

Σφάλμα Typescript:

 ERROR  Failed to compile with 2 errors                                                                                                       friendly-errors 22:16:27

error                                                                                                                                         friendly-errors 22:16:27
                                                                                                                                   friendly-errors 22:16:27
      TS18002: The 'files' list in config file 'tsconfig.json' is empty.
                                                                                                                                              friendly-errors 22:16:27
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& 42:0-37 50:7-11
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

Παρακαλώ σημειώστε ότι όταν προσπαθείτε να εισάγετε .ts μέσα στο έργο nuxt, δεν υπάρχει αυτό το σφάλμα.

Ξέρει κανείς πώς να μοιράζεται κώδικα μεταξύ έργων nuxt κάτω από ένα ενοποιημένο αποθετήριο;

Απάντηση #1

Έτσι, η λύση μου ήταν να χρησιμοποιήσω το Lerna για διαχείριση. Δημιουργούσε συνδέσμους (symlinks) μέσα στο node_modules για διαχείριση, αλλά αυτό από μόνο του δεν λύνει το πρόβλημα με τις εισαγωγές σε JS και TS.

Για το JS, πρέπει να οριστεί ένα alias στο webpack στη θέση στο node_modules. Η επίλυση για symlinks πρέπει επίσης να απενεργοποιηθεί για το webpack, διαφορετικά θα προκύψουν προβλήματα στο TS.

Γενική σημείωση είναι ότι το import xxx from ''@ui/shared/xxx'' απέτυχε για μένα κατά την αλλαγή διαδρομής στην πλευρά του πελάτη αλλά όχι κατά την αλλαγή URL του προγράμματος περιήγησης, πρέπει να χρησιμοποιηθεί import xxx from 'Shared/xxx'. Δεν ξέρω γιατί, οπότε αν ξέρετε, παρακαλώ γράψτε ένα σχόλιο.

_{nuxt.config.ts}

  // ...
  build: {
    /*
     ** You can extend webpack config here
     */
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    extend (config, ctx) {
      config.resolve = config.resolve || {}
      config.resolve.symlinks = false
      config.resolve.alias = config.resolve.alias || {}
      config.resolve.alias.Shared = '@ui/shared'
    }
  }
  // ...