Stellen Sie sicher, dass der Webpack-Bibliotheksausgang mit babel6 kompatibel ist

Babel Die 6. Version ändert die Funktionsweise von export default und insbesondere die Beziehung zu commonjs require.Stellen Sie sicher, dass der Webpack-Bibliotheksausgang mit babel6 kompatibel ist

Zusammenfassend, während bis babel5, require('module') wo geben den Standard-Export des Moduls, gibt es jetzt immer das Modul-Objekt, das alle Exporte des Moduls enthält. Wenn nur der Standard gewünscht wird, muss er/sie require('module').default verwenden. As explained here, there is very good reasons behind this und das Ziel dieser Frage ist nicht, dieses Verhalten zu brechen oder zu hacken.

Wenn jedoch eine Bibliothek erstellt wird, möchte er normalerweise kein Modul verteilen, sondern den Exportwert seiner Bibliothek (z. B. eine Funktion, welches Modulsystem auch immer intern verwendet wird). Dies wird gut durch webpack und die output.library Konfiguration bei Verwendung commonjs oder AMD behandelt. Da frühere Babel-Versionen den Standardexport mit commonjs ermöglichen, war babel auch mit diesem Mechanismus kompatibel. Dies ist jedoch nicht mehr der Fall: Die Bibliothek stellt nun immer ein es6-Modulobjekt zur Verfügung.

Hier ist ein Beispiel.

src/main.js

export default "my lib content";

webpack.config.js

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

module.exports = { 
    entry: { 
    lib: [ path.resolve(__dirname, "src/main.js") ], 
    }, 
    output: { 
    path: path.join(__dirname, "dist"), 
    filename: "mylib-build.js", 
    library: 'myLib' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: "babel", 
     include: path.join(__dirname, "src"), 
     query: { presets: ['es2015'] } 
     } 
    ] 
    } 
};

test.html

<html> 
<head></head> 
<body> 
<script src="dist/mylib-build.js"></script> 
<!-- `myLib` will be attached to `window` --> 
<script> 
    console.log(JSON.stringify(myLib)); // { default: "my lib content" } 
</script> 
</body> 
</html>

Dies ist ein sehr simpl Das Beispiel, aber ich möchte natürlich den Export von Mylib die Zeichenfolge "my lib content" statt { default: "my lib content" } sein.

Eine Lösung könnte sein, eine Export-Quelldatei in Commonjs zu erstellen, um die Transformation auszuführen:

module.exports = require('./main').default;

jedoch finde ich diese Lösung ziemlich schlecht. Man sollte es auf der Kompilierungsebene lösen können, ohne den Quellcode zu ändern. Irgendeine Idee?

Quelle

2015-11-12 Quentin Roy

* * Nicht ganz sicher, welche Art von Antwort Sie erwarten. Wenn Sie denken, dass dies eine Kompilierungsoption sein sollte, sollten Sie dies den Entwicklern vorschlagen. –

Die Konfiguration des Webpacks ist ziemlich leistungsstark. Es gibt viele verschiedene Plugins und viele verschiedene Parameter für alle Lader. –

Wenn Sie beispielsweise nur den Standardexport verwenden, könnte er [babel-plugin-transform-es2015-modules-commonjs] (http://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/) und verwenden wandle alle seine es6-Pakete in commonjs um. –

Webpack 2 unterstützt jetzt es6-Module, die dieses Problem teilweise lösen. Migrating from webpack 1 to webpack 2 ist relativ schmerzlos. Man muss nur an disable babel's es6 module to commonjs conversion erinnern, diese Arbeit zu machen:

.babelrc

{ 
    "presets": [ 
    ["es2015", {"modules": false}] 
    ] 
}

Doch leider funktioniert es nicht richtig mit Export Standard (aber an issue is opened, hoffentlich eine Lösung wird schließlich freigegeben werden).

EDIT

Gute Nachrichten! Webpack 3 unterstützt die output.libraryExport Option, die direkt verwendet werden kann, um den Standard-Export aussetzen: „? Man sollte es zu lösen in der Lage eine Übersetzungsoption hat und ohne den Quellcode zu aktualisieren, die Irgendeine Idee“

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

module.exports = { 
    entry: { 
    lib: [ path.resolve(__dirname, "src/main.js") ], 
    }, 
    output: { 
    path: path.resolve(__dirname, "dist"), 
    filename: "mylib-build.js", 
    library: "myLib", 
    // Expose the default export. 
    libraryExport: "default" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: "babel", 
     include: path.resolve(__dirname, "src") 
     } 
    ] 
    } 
};

Quelle

2016-12-02 04:37:04

-1

können Sie diese Lösung verwenden (diese eher wie Abhilfe ist, aber es können Sie Ihre Quellen von Veränderung halten):

Es gibt einen Lader callback-loader genannt wird. Sie können Ihre Quellen in einer Build-Zeit ändern, indem Sie einen Callback aufrufen und stattdessen ein Ergebnis eingeben. Mit anderen Worten, Sie können alle Sie require('module') in eine require('module').default automatisch in einer Bauzeit drehen.

Hier ist der Config für sie:

var webpackConfig = { 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: 'callback' }, 
      ... 
     ] 
    }, 
    ... 
    callbackLoader: { 
     require: function() { 
      return 'require("' + Array.prototype.join.call(arguments, ',') + '").default'; 
     } 
    } 
};

Quelle

2015-11-19 14:07:09 Kreozot

Tut mir leid, aber es funktioniert nicht.Dies ändert die Art, wie Module geladen, nicht exportiert werden. –

War gerade in dieser meiner selbst gehen. Ob man es gerne als Workaround oder Lösung bezeichnet, es scheint ein Babel-Plugin zu geben, das es "löst".

des Plugins babel-plugin-add-module-exports wie in https://stackoverflow.com/a/34778391/1592572

Beispiel Config verwiesen

var webpackOptions = { 
    entry: { 
     Lib1: './src/Lib1.js', 
     Lib2: './src/Lib2.js' 
    }, 
    output: { 
     filename: "Master.[name].js", 
     library: ["Master","[name]"], 
     libraryTarget: "var" 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel', 
       query: { 
        presets: ['es2015'], 
        plugins: ["add-module-exports"] 
       } 
      } 
     ] 
    } 
};

Diese Master.Lib1 werden lib1 statt Master.Lib1.default ergibt.

Quelle

2016-01-15 21:32:18

Ich denke, es ist eine gute Problemumgehung. Ich denke jedoch, dass es nur am Einstiegspunkt angewendet werden sollte. Es ist eine schlechte Idee, das alte Verhalten des Babels vollständig wiederherzustellen. –

Stellen Sie sicher, dass der Webpack-Bibliotheksausgang mit babel6 kompatibel ist

Antwort

Verwandte Themen