web-dev-qa-db-fra.com

Impossible de minifier le code de ce fichier

Je suis en train de créer une bibliothèque JavaScript que je veux mettre sur npm. J'utilise actuellement cette bibliothèque dans un autre projet et je l'ai ajoutée comme dépendance à l'aide de son référentiel GitHub:

"dependencies": {
  // ... others
  "react-web-component": "LukasBombach/react-web-component",
}

J'utilise aussi Webpack avec la UglifyJsPlugin. Maintenant, quand je veux construire mon projet, je reçois une erreur:

Échec de la compilation.

Impossible de minifier le code de ce fichier:

./packages/react-scripts/node_modules/react-web-component/src/index.js ligne 18: 0

Lisez plus ici: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

error La commande a échoué avec le code de sortie 1.

C'est un problème de ma bibliothèque. Quand je le supprime de mes dépiles (et de mon code), la compilation fonctionne.

Je n'arrive pas à comprendre le problème, mon code semble assez simple:

const ReactDOM = require('react-dom');
const retargetEvents = require('./retargetEvents');
const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader');

module.exports = {
  create: function(app, tagName, options) {
    const proto = Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function() {
          const shadowRoot = this.createShadowRoot();
          const mountPoint = document.createElement('div');
          getStyleElementsFromReactWebComponentStyleLoader().forEach(style =>
            shadowRoot.appendChild(style)
          );
          shadowRoot.appendChild(mountPoint);
          ReactDOM.render(app, mountPoint);
          retargetEvents(shadowRoot);
        },
      },
    });
    document.registerElement(tagName, { prototype: proto });
  },
};

Dans les variables retargetEvents et getStyleElementsFromReactWebComponentStyleLoader, il existe des commandes module.export simples. Vous pouvez voir leur code source ici et ici .

J'ai déjà essayé de publier ma bibliothèque à l'aide des commandes d'exportation/importation ES6.

Le code source complet de ma bibliothèque (ce ne sont que ces 3 fichiers) est disponible sur https://github.com/LukasBombach/react-web-component

javascriptnode.jsminifyuglifyjs2
4
Lukas

J'ai trouvé la solution!

J'ai eu quelques fonctionnalités ES6 dans mon code, à savoir foreach l'opérateur ~ et la syntaxe de la fonction sténographie. Le laid n'a pas accepté cela. Je devais remplacer cela par du code ES5 et cela fonctionne bien maintenant.

4
Lukas

Pour ceux que vous êtes confrontés au problème. Vérifiez d’abord dans votre package.json si vous utilisez React-script 1.x. Si c'est le cas, essayez de passer à la version 2.x.x.

À partir de la documentation officielle de dépannage l'exécution de npm n'a pas pu être réduite

avant que [email protected], ce problème ait été causé par un tiers node_modules utilisant des fonctionnalités JavaScript modernes, car le minificateur ne pouvait pas les gérer pendant la construction. été résolu en compilant les fonctionnalités JavaScript modernes standard dans node_modules dans [email protected] et supérieur.

Si vous voyez cette erreur, vous utilisez probablement une ancienne version de react-scripts. Vous pouvez résoudre ce problème en évitant une dépendance selon laquelle Utilise la syntaxe moderne ou en effectuant une mise à niveau vers react-scripts@>=2.0.0 et En suivant les instructions de migration du journal des modifications.

Mise à niveau par.

npm install --save --save-exact [email protected]

ou

yarn add --exact [email protected]
0
Ken Ratanachai S.