web-dev-qa-db-fra.com

importer un module de node_modules avec babel mais a échoué

J'ai écrit un module avec es6 et je le publie sur le npm, je veux l'utiliser dans un autre projet, alors je tape comme ceci:

import {ActionButton} from 'rcomponents'

Mais cela n'a pas fonctionné:

D:\github\blog\node_modules\rcomponents\src\actionButton.jsx:1
(function (exports, require, module, __filename, __dirname) { import React fro
                                                              ^^^^^^
SyntaxError: Unexpected reserved Word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Module._extensions..js (module.js:478:10)
    at Object.require.extensions.(anonymous function) [as .jsx] (D:\github\blog\
node_modules\babel\node_modules\babel-core\lib\api\register\node.js:214:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at D:\github\blog\node_modules\rcomponents\src\index.js:3:19
    at Object.<anonymous> (D:\github\blog\node_modules\rcomponents\src\index.js:
7:3)

Voici ma configuration de chargeur js dans webpack:

{ test: /\.jsx?$/, loader: `babel?cacheDirectory=${babelCache}` }

Lorsque j'essaie d'importer un module qui n'est pas de node_modules, babel fonctionne bien. Mais importez un module depuis node_modules, babel ne semble pas fonctionner?

reactjsbabeljs
18
Leo Gao

Voir les documents babel :

REMARQUE: Par défaut, tous les éléments requis pour node_modules seront ignorés. Vous pouvez ignorer cela en passant une expression rationnelle ignorée.

En général, on s'attend à ce que les modules de node_modules aura déjà été transpilé à l'avance, ils ne sont donc pas traités par Babel. Si vous ne le faites pas, vous devez lui dire quels fichiers il peut traiter. ignore permet cela.

require("babel/register")({
    // Ignore everything in node_modules except node_modules/rcomponents.
    ignore: /node_modules\/(?!rcomponents)/
});
25
loganfsmyth

En règle générale, les packages téléchargés sur npm doivent être précompilés, afin que les utilisateurs reçoivent un JS normal et ne nécessitent pas d'étape de génération. Utilisation npm prepublish pour ça.

Cependant, si vous utilisez webpack, vous pouvez spécifier une fonction exclude dans votre configuration webpack (voir webpack docs ):

module: {
  loaders: [{
    test: /.jsx?$/,
    loader: 'babel-loader',
    exclude(file) {
      if (file.startsWith(__dirname + '/node_modules/this-package-is-es6')) {
        return false;
      }
      return file.startsWith(__dirname + '/node_modules');
    },

Si vous utilisez directement babel, vous pouvez écrire une fonction ignore similaire dans le hook require .

4
Wilfred Hughes

Vous pouvez utiliser https://www.npmjs.com/package/babel-node-modules pour ce cas

npm install --save-dev babel-node-modules
require('babel-node-modules')([
  'helloworld' // add an array of module names here 
]);

puis il compile les modules répertoriés sous forme d'autres fichiers

1
Nedudi