web-dev-qa-db-fra.com

Webpack ne convertit pas ES6 en ES5

Je suis très nouveau sur Webpack. Je pense que je le fais mal. J'aimerais convertir une fonction ES6 en fonction ES5 à l'aide de Babel. Alors j'ai fait des recherches et j'ai trouvé babel-loader. Cependant, je ne suis pas sûr de ce que je fais. 

J'ai lancé npm installer babel-loader --save-dev et il a été ajouté à mon package.json

// package.json

{
  "name": "kanban",
  "version": "1.0.0",
  "description": "kanban",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "html-webpack-plugin": "^1.7.0",
    "json-loader": "^0.5.4",
    "webpack": "^1.12.9"
  }
}

// webpack.config.js

var path = require('path');
var HtmlwebpackPlugin =  require('html-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

module.exports = {
  entry: PATHS.app,
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Kanban app'
    })
  ],
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader' }
    ]
  }
};

// app/index.js - Je viens d'ajouter une fonction aléatoire inutile dans la syntaxe ES6. J'espérais voir le format ES5 dans mon fichier bundle.js mais cela n'a pas changé. C'est toujours la syntaxe ES6 dans bundle.js 

var component = require('./component');
var app = document.createElement('div');
document.body.appendChild('app');
app.appendChild(component());

let myJson = {
  prop: 'myProp'
};

let fives = [];
nums = [1, 2, 5, 15, 25, 32];

// Statement bodies
nums.forEach(function (v) {
  if (v % 5 === 0) {
    fives.Push(v);
  }
}, this);

console.log(fives);

let sum = (a, b) => a + b;

// app/composant.js

module.exports = function() {
  var element = document.createElement('h1');
  element.innerHTML = 'hello world';
  return element;
};
node.jswebpackbabeljs
29
devwannabe

Si vous souhaitez compiler ES6 à ES5, vous devez installer Babel ES2015 preset .

npm install babel-preset-es2015

Ensuite, vous devez activer ce préréglage. Une des façons d’activer cette compilation ES6 à ES5 consiste à utiliser babel-loader query string:

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader?presets[]=es2015'
      }
    ]
  }

ou option de requête:

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
37
dreyescat

pour le Webpack 3, les options du module devraient ressembler à

 module: {
 règles: [
 {
 utilisation: {
 chargeur: 'babel-loader', 
 options: {presets: ['es2015']} 
 }, 
 test: /\.js$/,
 exclure: /node_modules/
 } 
 ] 
},

cela nécessite toujours babel-loader et babel-preset-es2015

11
PhilVarg

J'ai le même problème. Eh bien, les responsables réagissent pour ajouter cette configuration à Webpack

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-hot-loader/babel"]
}

voici le lien: https://github.com/facebook/react/issues/8379

0
Inessa Pokromkina