Le fichier Babel est copié sans être transformé

Question

J'ai ce code :

"use strict";

import browserSync from "browser-sync";
import httpProxy from "http-proxy";

let proxy = httpProxy.createProxyServer({});

et j'ai installé babel-core y babel-cli globalement via npm. Le problème est que lorsque j'essaie de compiler avec cela sur mon terminal :

babel proxy.js --out-file proxified.js

Le fichier de sortie est copié au lieu d'être compilé (c'est-à-dire qu'il est le même que le fichier source).

Qu'est-ce que je rate ici ?

Answer 1

Babel est un cadre de transformation. Avant la version 6.x, il activait certaines transformations par défaut, mais avec l'utilisation accrue des versions de Node qui supportent nativement de nombreuses fonctionnalités ES6, il est devenu beaucoup plus important que les choses soient configurables. Par défaut, Babel 6.x n'effectue aucune transformation. Vous devez lui indiquer les transformations à exécuter :

npm install babel-preset-env

et exécuter

babel --presets env proxy.js --out-file proxified.js

ou créer un .babelrc contenant

{
    "presets": [
        "env"
    ]
}

et le faire fonctionner comme avant.

env dans ce cas, c'est un preset qui dit essentiellement de compiler tous les comportements ES* standard en ES5. Si vous utilisez des versions de Node qui supportent un peu d'ES6, vous pouvez envisager de faire

{
    "presets": [
        ["env", { "targets": { "node": "true" } }],
    ]
}

pour indiquer au préréglage de ne traiter que les éléments qui ne sont pas pris en charge par votre version de Node. Vous pouvez également inclure les versions des navigateurs dans vos cibles si vous avez besoin de la prise en charge des navigateurs.

Answer 2

La plupart de ces réponses sont obsolètes. @babel/preset-env y "@babel/preset-react sont ce dont vous avez besoin (à partir de juillet 2019).

Answer 3

J'ai eu le même problème avec une cause différente :

Le code que j'essayais de charger ne se trouvait pas dans le répertoire du paquet, et Babel ne transpose pas par défaut en dehors du répertoire du paquet.

J'ai résolu le problème en déplaçant le code importé, mais j'aurais peut-être pu aussi utiliser une déclaration d'inclusion dans la configuration de Babel.

Answer 4

Assurez-vous d'abord que vous disposez des éléments suivants node modules :

npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader

Ensuite, ajoutez ceci à votre Webpack config fichier ( webpack.config.js ) :

// webpack.config.js
...
module  :  {
  loaders  :  [
    {
      test    :  /\.js$/,
      loader  :  'babel',
      exclude :  /node_modules/,
      options :  {
        presets  :  [ 'es2015', 'stage-2' ] // stage-2 if required
      } 
    } 
  ]
}
...

Références :

• https://gist.github.com/Couto/6c6164c24ae031bff935
• https://github.com/babel/babel-loader/issues/214

Bonne chance !

Answer 5

A partir de 2020, Jan :

ÉTAPE 1 : Installer le Babel presets :

yarn add -D @babel/preset-env @babel/preset-react

ÉTAPE 2 : Créez un fichier : babelrc.js et ajoutez le presets :

module.exports = {
  // ...
  presets: ["@babel/preset-env", "@babel/preset-react"],
  // ...
}

ÉTAPE 3 : - Installer le babel-loader :

yarn add -D babel-loader

ÉTAPE 4 : - Ajoutez la configuration du chargeur dans votre fichier webpack.config.js :

{
//...
  module: [
    rules: [
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      loader: require.resolve('babel-loader')
    ]
  ]
//...
}

Bonne chance...