Estoy tratando de ejecutar algún código ES6 en mi proyecto, pero recibo un error inesperado de exportación de token.
export class MyClass {
  constructor() {
    console.log("es6");
  }
}
                    
                        javascript
                                ecmascript-6
                                webpack
                                babel
                                
                    
                    
                        Jason
fuente
                
                fuente

exportque solo está disponible en ES6, y esos módulos son los que proporcionan soporte para ES6.module.exports = MyClass, noexport class MyClassRespuestas:
Está utilizando la sintaxis del módulo ES6.
Esto significa que su entorno (por ejemplo, node.js) debe admitir la sintaxis del módulo ES6.
NodeJS usa la sintaxis del módulo CommonJS (
module.exports) no la sintaxis del módulo ES6 (exportpalabra clave).Solución:
babelpaquete npm para transpilar su ES6 a uncommonjsobjetivoo
Ejemplos de sintaxis de CommonJS son (de flaviocopes.com/commonjs/ ):
exports.uppercase = str => str.toUpperCase()exports.a = 1fuente
importforma nativa? Pensé que v10.0.0 lo tendría, pero aparentemente no.En caso de que reciba este error, también podría estar relacionado con la forma en que incluyó el archivo javascript en su página html. Al cargar módulos, debe declarar explícitamente esos archivos como tales. Aquí un ejemplo:
Cuando incluye el script de esta manera:
Obtendrás el error:
Debe incluir el archivo con un atributo de tipo establecido en "módulo":
Y luego funcionará como se espera y estará listo para importar su módulo en otro módulo:
fuente
typese espera que sea un tipo mime válido (también conocido como tipo de medio), por lo que este fue un hallazgo inesperado. ¡Gracias!<script type="module">import ...</script>, cuando importas desde el módulo. Lo probé en una versión reciente de Chromium.Mis dos centavos
Exportar
ES6
Alternativa CommonJS
Exportar predeterminado
ES6
Alternativa CommonJS
Espero que esto ayude
fuente
Para usar ES6 agregue
babel-preset-envy en tu
.babelrc:Respuesta actualizada gracias al comentario de @ghanbari para aplicar babel 7.
fuente
babelpor el autor. Si bien la respuesta de Phil Ricketts aclara el problema, lo cual es bueno, esta respuesta es una solución directa al problema del autor.No hay necesidad de usar Babel en este momento (JS se ha vuelto muy poderoso) cuando simplemente puede usar las exportaciones predeterminadas del módulo JavaScript. Ver tutorial completo
Message.js
app.js
fuente
Instale los paquetes de babel
@babel/corey@babel/presetque convertirá ES6 en un objetivo commonjs ya que el nodo js no entiende los objetivos ES6 directamentenpm install --save-dev @babel/core @babel/preset-envLuego, debe crear un archivo de configuración con el nombre
.babelrcen el directorio raíz de su proyecto y agregar este código allí{ "presets": ["@babel/preset-env"] }fuente
Lo arreglé haciendo un archivo de punto de entrada como.
y cualquier archivo que importé dentro
app.jsy más allá funcionóimports/exportsahora solo lo ejecuta comonode index.jsNota: si se
app.jsusaexport default, esto se hacerequire('./app.js').defaultcuando se usa el archivo de punto de entrada.fuente
El uso de la sintaxis ES6 no funciona en el nodo, desafortunadamente, aparentemente debe tener babel para que el compilador entienda la sintaxis como exportar o importar.
Ahora necesitamos crear un archivo .babelrc, en el archivo babelrc, configuraremos a babel para que use el preajuste es2015 que instalamos como preajuste al compilar en ES5.
En la raíz de nuestra aplicación, crearemos un archivo .babelrc. $ npm install babel-preset-es2015 --save
En la raíz de nuestra aplicación, crearemos un archivo .babelrc.
Espero que funcione ... :)
fuente