3
votes

vue cli build avec la bibliothèque cible: "require n'est pas défini" lorsque le composant est importé

J'essaie d'exporter un composant Vue en tant que package et d'utiliser vue cli pour construire le dist. J'ai l'intention de le publier sur npm, mais j'utilise actuellement un lien symbolique à des fins de test. Cependant, même avec un simple projet hello-world, je ne peux pas créer de package valide.

J'ai créé un projet:

[Vue warn]: Failed to resolve async component: function MediaViewerPdf() {
  return Promise.all(/*! import() */[__webpack_require__.e(62), __webpack_require__.e(46)]).then(__webpack_require__.bind(null, /*! ./viewers/MediaViewerPdf.vue */ "./vuejs/components/mediaViewer/viewers/MediaViewerPdf.vue"));
}
Reason: ReferenceError: require is not defined

Ensuite, j'ai modifié le package.json:

import HelloWorld from "hello-world";

Ensuite, j'appelle

npm run build

et il compile sans erreur.

Ensuite, je fais une importation dans un composant vue dans un autre projet (j'ai utilisé un lien symbolique dans node_modules):

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue",
    "lint": "vue-cli-service lint"
  },
  "main": "./dist/vue-hello-world.common.js",

Sur le rendu de la page, j'obtiens l'erreur suivante:

vue create hello-world

en utilisant vue inspect , j'ai vérifié que dans la configuration du pack Web:

cible: "web"

J'ai déjà défini Resolution.symlinks sur false sur le projet d'importation.

EDIT: J'ai confirmé que cela ne venait pas du lien symbolique, j'ai exactement la même erreur avec le package directement sur node_modules.

Repo avec le code entier: https://github.com/louis-sanna/vue-hello-world p>

javascript webpack vue.js vue-cli require

5 commentaires

Vous avez donc créé ce composant et vous essayez de l'importer dans un autre projet Vue?

@ Josef7 Correct.

Essayez de regarder cette question , il semble que vous deviez ajouter des éléments à le package.json vue-hello-world, importez en tant que dépendance de développement dans l'autre projet et utilisez éventuellement npm link pour lier les packages

J'utilise actuellement un lien symbolique à des fins de test, mais j'ai l'intention de le publier sur npm.

La question que vous avez posée ne correspond donc pas à mes besoins.

3 Réponses :

0
votes

Vous ne savez pas comment vous créez le lien symbolique, mais vous devriez utiliser npm link pour cela. Si vous rencontrez toujours des problèmes (comme je l'ai fait moi-même), je vous suggère d'essayer npm-link-better:

npm install -g npm-link-better
cd vue-hello-world
npm link
cd ../hello-world
nlc -w vue-hello-world

Pour créer des bibliothèques de composants, je suggère que vous ayez un coup d'oeil à vue-cli-plugin-component . Ce plugin configure déjà assez bien le projet vue-cli.

0 commentaires

2
votes

Cela est dû au fait que la configuration de Vue CLI Webpack par défaut n'importe pas les modules commonjs, comme décrit dans votre champ "principal" dans package.json. Le problème vient donc du projet qui tente d’importer, pas du projet qui exporte le composant.

Il y a deux façons de tenter de résoudre ce problème.

Du côté du projet d'importation

Vous pouvez remédier à cela en installant des plugins babel pour le projet qui importe vos composants et en définissant babel.config.js

import 'hello-world/dist/vue-hello-world.css';

Mais faire cela seul ne suffira pas être suffisant: vous devrez également importer le CSS qui est généré avec la bibliothèque en l'ajoutant dans votre fichier d'entrée

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    '@babel/plugin-transform-modules-commonjs', // leave to import .common.js files
    '@babel/plugin-transform-modules-umd'       // leave to import .umd.js files
  ]
}

Notez que je n'ai testé cela qu'en utilisant le lien yarn, mais Je suis convaincu que cela fonctionnera très bien avec un module npm séparé importé.

Du côté de la bibliothèque

L'intention (je suppose) de la question originale - comment regrouper une bibliothèque pour que mes utilisateurs n'aient pas à faire cette petite danse à chaque fois qu'ils veulent l'utiliser?

Option 1: ne le regroupez pas - fournissez les fichiers .vue et les sources. Incluez simplement tout dans le répertoire 'src' de votre module, écrivez un readme avec des explications et en avez terminé. Laissez le projet importateur comprendre la compilation et le regroupement.

Option 2: utiliser le rollup avec le plugin Vue pour regrouper les composants dans le bundle. Il y a un exemple sur la façon de faire cela. Dans cet exemple, vous pouvez voir que votre projet pourra importer une version .esm https://github.com/vuejs/rollup-plugin- vue / tree / master / cookbook / library

0 commentaires

3
votes

J'ai donc posé la question sur le repo vue-cli et j'ai eu la solution! https://github.com/vuejs/vue-cli/issues/4245

Il s'avère que NODE_ENV était déjà défini lors du développement dans mon shell, donc c'était le mode utilisé pour faire la construction.

Juste besoin pour définir le mode explicitement et cela fonctionne:

vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue --mode production

Vous devrez peut-être l'ajouter à vue.config.js:

config
  .mode("production")

0 commentaires