Webpack wandelt ES6 in ES5 nicht um

Ich bin sehr neu in Webpack. Ich denke ich mache es falsch. Ich möchte eine ES6-Funktion mit Babel in ES5-Funktion konvertieren. Also habe ich recherchiert und Babel-Loader gefunden. Ich bin mir jedoch nicht sicher, was ich mache.Webpack wandelt ES6 in ES5 nicht um

I RAN npm installieren babel-loader --save-dev und es wurde hinzugefügt, in mein 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

// app/index.js - Ich habe gerade einige zufällige nutzlose Funktion in ES6-Syntax hinzugefügt. Ich hatte gehofft, dass ich das ES5-Format in meiner Bundle.js-Datei sehen werde, aber es hat sich nicht geändert. Es ist immer noch ES6 Syntax in 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/component.js

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

Quelle

2015-12-21 devwannabe

Was erwartest du es würde tun? Sie müssen Ihr Skript mit babel in der Konsole oder in einem Task Runner kompilieren (grunt, schluck, ...). https://babeljs.io/docs/usage/cli/ – Ludo

Vielen Dank. Ich dachte, Webpack würde es für mich über babel-loader machen. – devwannabe

Was ich möchte ist, dass Webpack babel ruft und so viel wie möglich nicht grunzen oder schlucken – devwannabe

Wenn Sie ES6 kompilieren Sie ES5 installieren müssen Babel ES2015 preset.

npm install babel-preset-es2015

Dann müssen Sie diese Voreinstellung aktivieren. Eine Möglichkeit, diese ES6 zu ES5 Kompilation zu ermöglichen verwendet babel-loader Query-String:

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

oder Abfrageoption:

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

Quelle

2015-12-21 21:53:49 dreyescat

Vielen Dank! Ich werde es versuchen, sobald ich nach Hause komme. Ich werde immer vom Netzwerk getrennt. – devwannabe

Es funktionierte dieses Loader-Konfiguration Modul: { Lader: [ { loader: 'babel-loader', Test: path.join (__ dirname, 'App'), Abfrage: { Presets: 'es2015' , } } ] } – devwannabe

für webpack 3 sollten die Optionen für das Modul aussehen

 
module: { 
    rules: [ 
    { 
     use: { 
      loader:'babel-loader', 
      options: { presets: ['es2015'] } 
     }, 
     test: /\.js$/, 
     exclude: /node_modules/ 
    } 
    ] 
},

Dies erfordert immer noch babel-loader und babel-preset-es2015

Quelle

2017-06-29 16:05:31 PhilVarg

Webpack wandelt ES6 in ES5 nicht um

Antwort

Verwandte Themen