Snap verh\u00e4lt sich ein wenig zickig, wenn man es zusammen mit Webpack verwenden m\u00f6chte. Diese Default-Konfiguration zeigt, wie es doch geht.<\/p>\n
\r\nvar path = require('path');\r\nvar webpack = require('webpack');\r\n\r\nvar js_path = "src\/Resources\/js";\r\nvar ts_path = "src\/Resources\/ts";\r\n\r\nmodule.exports = {\r\n module: {\r\n rules: [{\r\n \/* Regel f\u00fcr normale JavaScript-Dateien, die sich innerhalb\r\n von src\/Resources\/js befinden. Die Dateien werden mittels\r\n babel-loader auf die letzten 2 Browserversionen "kompatibilisiert". *\/\r\n\r\n loader: "babel-loader",\r\n\r\n\r\n include: [ \/\/ Regel gilt nur f\u00fcr diesen Pfad\r\n path.resolve(__dirname, js_path),\r\n ],\r\n\r\n \/\/ Nur `.js` and `.jsx` Dateien durch Babel schicken\r\n test: \/\\.jsx?$\/,\r\n\r\n \/\/ Babel-Optionen\r\n query: {\r\n \/\/ plugins: ['transform-runtime'],\r\n presets: [\r\n ['env', {\r\n targets: {\r\n "browsers": ["last 2 versions", "ie >= 9"]\r\n }\r\n }]\r\n ],\r\n }\r\n },\r\n {\r\n \/* Regel f\u00fcr TypeScript Dateien, die in src\/Resources\/ts\r\n oder innerhalb von node_modules sind.*\/\r\n test: \/\\.tsx?$\/,\r\n use: 'ts-loader',\r\n include: [\r\n path.resolve(__dirname, ts_path),\r\n path.resolve(__dirname, "node_modules"),\r\n ],\r\n },\r\n\r\n {\r\n \/* Sonderregel f\u00fcr jquery. Daf\u00fcr sorgen, dass die jQuery-Symbole\r\n $ sowie jQuery im globalen Namespace landen. Das ist f\u00fcr\r\n Skripte, die inline in HTML-Dateien sind, notwendig.\r\n \u00dcber das webpack.ProvidePlugin (Beispiel siehe unten) klappt das\r\n zwar in .js Dateien aber nicht im inline-js. *\/\r\n test: \/jquery-[0-9\\.]*\\.js\/,\r\n use: [{\r\n loader: 'expose-loader',\r\n options: '$'\r\n },\r\n {\r\n loader: 'expose-loader',\r\n options: 'jQuery'\r\n },\r\n ]\r\n },\r\n {\r\n \/* Snap im Kompatibilit\u00e4tsmodus importieren. Snap\r\n erwartet, dass this auf das aktuelle window zeigt. Zudem enth\u00e4lt die\r\n index.d.ts keine Moduldefinition. Daher m\u00fcssen die module.exports\r\n automatisch erg\u00e4nzt werden.*\/\r\n test: require.resolve('snapsvg\/dist\/snap.svg.js'),\r\n use: [\r\n 'imports-loader?this=>window,fix=>module.exports=0',\r\n ],\r\n },\r\n ],\r\n },\r\n\r\n \/* Ausgabepfad konfigurieren *\/\r\n output: {\r\n path: path.resolve(__dirname, 'public\/js'),\r\n filename: 'main.js'\r\n },\r\n\r\n\r\n \/* Verzeichnisse konfigurieren, in denen die Module gesucht werden.*\/\r\n resolve: {\r\n modules: [\r\n 'node_modules',\r\n js_path,\r\n ts_path\r\n ],\r\n extensions: [ '.ts', '.js' ],\r\n\r\n \/* Bibliotheken auf die konkrete Version verlinken. *\/\r\n alias: {\r\n 'jquery': 'jquery-3.2.1.js',\r\n 'snapsvg': 'snapsvg\/dist\/snap.svg.js',\r\n }\r\n },\r\n\r\n \/* Entry-Punkte definieren. Diese Dateien werden auch includet,\r\n selbst wenn sie von nirgendwo referenziert werden.\r\n Wird f\u00fcr einen Einsprung von inline-JS in HTML-Dateien ben\u00f6tigt.*\/\r\n entry: [\r\n '.\/src\/Resources\/js\/filtertable.js',\r\n '.\/src\/Resources\/js\/jstree.js',\r\n '.\/src\/Resources\/js\/graph.js',\r\n 'jquery',\r\n 'snapsvg',\r\n ],\r\n\r\n \/* Einstellen, welche Form von Source-Maps erzeugt werden sollen. Siehe\r\n https:\/\/webpack.js.org\/configuration\/devtool\/ *\/\r\n devtool: 'source-map',\r\n\r\n plugins: [\r\n \/* Symbole in alles .js Dateien zur Verf\u00fcgung stellen. Dieses plugin\r\n wirkt sich NICHT auf inline-javascript aus und wird deshalb hier\r\n nicht verwendet! *\/\r\n \/*\r\n new webpack.ProvidePlugin({\r\n '$': "jquery",\r\n jQuery: "jquery",\r\n 'window.$': 'jquery'\r\n })\r\n *\/\r\n ],\r\n watchOptions: {\r\n aggregateTimeout: 300, \/\/ 300ms Verz\u00f6gerung bei \u00c4nderungen um nachfolgende Speichervorg\u00e4nge zusammenzufassen\r\n poll: 1000, \/\/ Alle 1000ms auf \u00c4nderungen pr\u00fcfen\r\n ignored: \/node_modules\/ \/\/ Verzeichnis node_modules ignorieren\r\n },\r\n};\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"Snap verh\u00e4lt sich ein wenig zickig, wenn man es zusammen mit Webpack verwenden m\u00f6chte. Diese Default-Konfiguration zeigt, wie es doch geht. var path = require(‚path‘); var webpack = require(‚webpack‘); var js_path = "src\/Resources\/js"; var ts_path = "src\/Resources\/ts"; module.exports = { module: { rules: [{ \/* Regel f\u00fcr normale JavaScript-Dateien, die sich innerhalb von src\/Resources\/js befinden….
Mehr Lesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-217","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/carsten.familie-schumann.info\/blog\/wp-json\/wp\/v2\/pages\/217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carsten.familie-schumann.info\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carsten.familie-schumann.info\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carsten.familie-schumann.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carsten.familie-schumann.info\/blog\/wp-json\/wp\/v2\/comments?post=217"}],"version-history":[{"count":1,"href":"https:\/\/carsten.familie-schumann.info\/blog\/wp-json\/wp\/v2\/pages\/217\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/carsten.familie-schumann.info\/blog\/wp-json\/wp\/v2\/pages\/217\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/carsten.familie-schumann.info\/blog\/wp-json\/wp\/v2\/media?parent=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}