Wie babel Abfrage + benutzerdefiniertes Plugin mit HappyPack 3.1.0 verwenden

Question

Wie würde ich diesen Loader konvertieren, um happypack zu verwenden?

`` `

module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      // NamespaceTransform converts the requires in legacy zukeeper code calls to 
      // App.namespace() to commonJs requires 
      plugins: [NamespaceTransform], 
      // TODO : upgrade Uglify + webpack to support direct es6 minification and remove 
      // es2015 preset. Uglify doesn't recognize import and export statements 
      presets: ['es2015', 'stage-2', 'react'] 
     } 
     }, 

` ``

Ich habe versucht, es in mehreren verschiedenen Orten setzen.

Das NamespaceTransform ist ein benutzerdefiniertes Babel-Transformations-Plugin, das oben benötigt wird.

Vielen Dank!

Answer 1

Sie müssen Ihre Babel-Konfiguration in einer separaten Datei definieren, da sie nicht auf JSON serialisiert werden kann (wegen NamespaceTransform). Verschieben Sie also zuerst diese Konfiguration in eine Datei mit dem Namen .babelrc.

// @file .babelrc 
module.exports = { 
    plugins: [NamespaceTransform], 
    presets: ['es2015', 'stage-2', 'react'] 
} 

// @file webpack.config.js 
{ 
    module: { 
    // rework your loader so that it points to happypack's: 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'happypack/loader', 
     exclude: /node_modules/, 
     } 
    ] 
    }, 

    // now define the HappyPack plugin 
    plugins: [ 
    new HappyPack({ 
     loaders: [ 
     { 
      loader: 'babel-loader', 
      query: { 
      // tell babel to read the config from .babelrc 
      babelrc: true 
      } 
     }, 
     ] 
    }) 
    ] 
} 

Ein einfacher Ansatz, bei dem Sie .babelrc nicht verwenden müssen, ist, dass Sie vorbei NamespaceTransform als Objekt/Stopp-Funktion, sondern seine Paketnamen als String übergeben und babel wird es nur abholen. Das wäre wie plugins: [ 'babel-namespace-transform-plugin' ], wenn das der Name des npm-Pakets ist.

bearbeitet: die alternative Lösung funktioniert auch für Pakete, die nicht auf NPM sind, in diesem Fall, dass Sie einfach den absoluten Pfad passieren (z path.resolve() verwenden) in das Verzeichnis der Plug-in und babel sollte es auch abholen.