web-dev-qa-db-fra.com

Babelify lance ParseError lors de l'importation d'un module à partir de node_modules

Je travaille avec Babelify et Browserify . En outre, j'utilise des fonctionnalités de module de style ES6 par système de module de nœud.

Je voudrais mettre tous mes propres modules dans node_modules/libs.

Par exemple:

test.js dans node_modules/libs

export default () => {
  console.log('Hello');
};

main.js (sera compilé en bundle.js)

import test from 'libs/test';

test();

Après cela, j'ai compilé les codes ci-dessus pour bundle.js avec cette commande:

browserify -t babelify main.js -o bundle.js

Mais malheureusement, j'ai une erreur:

export default () => {
^

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Structure du répertoire:

[test]
  `-- node_modules
  │ `-- libs
  │  `-- test.js
  `-- main.js

Mais, lorsque ses propres modules ne sont pas dans node_modules comme ça:

[test]
  `-- libs
  │ `-- test.js
  `-- main.js

Ensuite, cela fonctionne bien. Comment puis-je utiliser les modules de style ES6 avec babelify dans node_modules?

javascriptnode.jsbrowserifyecmascript-6babeljs
32
Plusb Preco

C'est ainsi que les transformations Browserify fonctionnent, les transformations n'ont d'effet que directement dans le module référencé.

Si vous voulez qu'un module dans node_modules ait une transformation, vous devez ajouter un package.json à ce module et ajoutez babelify comme transformation pour ce module également. par exemple.

"browserify": {
  "transform": [
    "babelify"
  ]
},

à l'intérieur de votre package.json plus babelify en tant que dépendance indiquera à browserify d'exécuter la transformation babelify sur n'importe quel fichier à l'intérieur de ce module.

Avoir libs comme dossier dans node_modules est cependant probablement une mauvaise idée. Généralement, ce dossier contient de vrais modules autonomes. Je dirais généralement que si le dossier ne peut pas être pris et réutilisé ailleurs, il ne devrait pas être dans node_modules.

Mise à jour

Pour Babel v6, qui a été récemment publié, vous devrez également spécifier les transformations que vous souhaitez effectuer sur votre code. Pour cela, je recommanderais de créer un .babelrc fichier dans votre répertoire racine pour configurer Babel.

{
  "presets": ["es2015"]
}

et

npm install --save-dev babel-preset-es2015
46
loganfsmyth

Vous pouvez spécifier les transformations source dans le package.json dans le browserify.transform champ. Il y a plus d'informations sur le fonctionnement des transformations source dans package.json sur le readme du module-deps .

Source: https://github.com/substack/node-browserify#browserifytransform

Exemple (my_batman_project/node_modules/test_robin_module/package.json):

"browserify": {
  "transform": [
    "babelify"
  ]
},

browserify lira la configuration et effectuera automatiquement toutes les transformations données.

5
mate64

Je crois que ce problème est en fait lié à ESLint.

ESLint 2.0 a modifié ce qui lui est nécessaire pour interpréter les modules ES6. http://eslint.org/docs/user-guide/migrating-to-2.0.

Vous devrez modifier votre option de configuration ecmaFeatures et la remplacer par quelque chose comme:

  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
4
Sean Anderson