Beginnen Sie mit Webpack von jQuery

Question

in unserem Team möchten wir auf ES6 migrieren. Wir verwenden jQuery und viele Plugins, einige in reinem Javascript wie interactjs und andere sind vollständig auf jQuery abgestimmt.

Wir wollen die Vorteile os ES6 (Klassen, Pfeilfunktionen, etc.) nehmen, aber ich weiß nicht, wie ich anfangen soll.

Ich habe die Dokumentation gelesen, aber ich weiß nicht, wie man mit Plugins beginnt, jQuery (ich habe über React gelesen, Babel, aber nichts für meinen Fall).

Danke!

Answer 1

Sie können mit einer einfachen Webpack-Konfiguration beginnen, die Ihre aktuellen js-Assets aufnimmt und sie mit einem Babel Loader bündelt. Installieren Sie webpack, babel-loader, babel-core und babel-preset-es2015 über npm.

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: './main.js', 
    output: { path: __dirname, filename: 'bundle.js' }, 
    module: { 
    loaders: [ 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ] 
    }, 
}; 

Sie mehrere Einstiegspunkte festlegen. Dies sollte ausreichen, um loszulegen. Im nächsten Schritt können Sie hinzufügen

1. Webpack-dev-Server für die Entwicklung und Hot-Module Ersatz
2. Produktion Config mit UglifyJS Plugin für eine optimale Bauvolumen
3. Bundle Assets wie Schriften und Bild
4. Bundle css/SCSS mit Postprozessor (zB autoprefixer)

die Dokumente werden eine große Hilfe sein, wie man den besten Plugin, Config, CLI-Flag wählen, usw.