Babelify lanza ParseError al importar un módulo desde módulos de nodo


Estoy trabajando con Babelify y Browserify. Además, estoy usando características del módulo de estilo ES6 por sistema de módulo de nodo.

Me gustaría poner todos mis propios módulos en node_modules/libs.

Por ejemplo:

test.js en node_modules/libs

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

main.js (se compilará a bundle.js)

import test from 'libs/test';

test();

Después de eso, he compilado los códigos anteriores a bundle.js con este comando:

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

Pero desafortunadamente, tengo algún error: {[19]]}

export default () => {
^

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

Directorio estructura:

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

Pero, cuando los propios módulos no en node_modules así:

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

Entonces, funciona bien. ¿Cómo puedo usar los módulos de estilo ES6 con babelify en node_modules?

Author: Plusb Preco, 2015-05-22

3 answers

Así es como funcionan las transformaciones de Browserify, las transformaciones solo tienen un efecto directamente en el módulo al que se hace referencia.

Si desea que un módulo en node_modules tenga una transformación, debe agregar un package.json a ese módulo y agregar babelify como una transformación para ese módulo también. por ejemplo,

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

Dentro de su package.json más babelify como una dependencia le dirá a browserify que ejecute la transformación babelify en cualquier archivo dentro de ese módulo.

Tener libs ser una carpeta en node_modules es sin embargo, probablemente una mala idea. Generalmente esa carpeta tendría módulos independientes verdaderos en ella. Generalmente diría que si la carpeta no se puede tomar y reutilizar en otro lugar, entonces no debería estar en node_modules.

Actualización

Para Babel v6, que fue lanzado recientemente, también tendrá que especificar qué transformaciones le gustaría realizar en su código. Para eso, recomendaría crear un archivo .babelrc en su directorio raíz para configurar Babel.

{
  "presets": ["es2015"]
}

Y

npm install --save-dev babel-preset-es2015
 47
Author: loganfsmyth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-16 04:47:03

Puede especificar fuente transforma en el package.json en el browserify.transform campo. Hay más información sobre cómo fuente transforma el trabajo en paquete.json en el módulo - deps readme .

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


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

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

Browserify leerá la configuración y realizar cualquier transforma automáticamente.

 5
Author: mate64,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-10 21:14:16

Creo que este tema está realmente relacionado con ESLint.

ESLint 2.0 cambió lo que se requiere para interpretar los módulos ES6. http://eslint.org/docs/user-guide/migrating-to-2.0.0

Tendrá que modificar su opción de configuración ecmaFeatures y reemplazarla con algo como:

  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
 4
Author: Sean Anderson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-07 18:42:26