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

J'ai écrit un module avec es6 et publiez-le sur la ngp, je veux l'utiliser dans un autre projet, donc j'type comme ceci:

import {ActionButton} from 'rcomponents'

Mais il ne fonctionne pas:

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 mon js configuration du chargeur dans webpack:

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

Lorsque j'essaie d'importer un module qui n'est pas de node_modulesbabel fonctionne bien. Mais l'importation d'un module de node_modulesbabel semble ne pas fonctionner?

source d'informationauteur Leo Gao

  1. 17

    Voir la babel docs:

    REMARQUE: Par défaut, tous les exige de node_modules sera ignoré. Vous pouvez remplacer cette valeur par le passage d'un ignorer les regex.

    Généralement on s'attend à ce que les modules en node_modules ont déjà été transpiled à l'avance, de sorte qu'ils ne sont pas traités par Babel. Si vous ne ferez pas cela, alors vous avez besoin de lui dire quels sont les fichiers qu'il peut traiter. ignore permet que.

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

    En général, les paquets à destination de mnp doit être précompilés, de sorte que les utilisateurs reçoivent normal JS et ne nécessitent pas une étape de génération. Utilisation npm prepublish pour cela.

    Toutefois, si vous utilisez webpack, vous pouvez spécifier un exclude fonction de votre webpack de configuration (voir la 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 êtes à l'aide de babel directement, vous pouvez écrire un semblable, ignorer de la fonction dans le besoin de crochet.

  3. 1

    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 
]);

    et puis il compile répertorié les modules que d'autres fichiers