Webpack a Nette – volání balíčků nebo funkcí z bundlu

kiCkZ

Ahoj,

chtěl bych se tak obecně zeptat, jak řešíte fungování Nette s Webpackem, mam klasicky bundlované JS v @layoutu na konci body, ale mam problém, že pokud si nahraju např. externí knihovnu, kterou naimportuju a následně zbundluju, tak se mi třeba v contentu (includovaný), který je volán dřív než JS soubor, nedá dovolat.

Jak toto řešíte, aby to bylo správně ?

Díky za rady

Martk

Nikdy jsem nepotřeboval volat v html kódu javascriptový kód. Používám třídy, data-* atributy nebo při nejhorším jednu globální proměnou. Můžeš poslat tvoje použití?

kiCkZ

Martk napsal(a):

Nikdy jsem nepotřeboval volat v html kódu javascriptový kód. Používám třídy, data-* atributy nebo při nejhorším jednu globální proměnou. Můžeš poslat tvoje použití?

@layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title -->
    <title>{ifset title} {include title|stripHtml} | {/ifset} Admin</title>

    <!-- Styles -->
    <link href="https://fonts.googleapis.com/css?family=Gudea:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="stylesheet" href="{$basePath}/dist/style.bundle.css">
</head>

<body>
    <div class="admin-container">
        <div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>

        {include @header.latte}

        {include @sidebar.latte}

        <main class="content">
            {include content}
        </main>

        {include @footer.latte}
    </div>
</body>
{block scripts}
    {* This JS bundle is generated via Webpack. See webpack.config.js *}
    <script src="{$basePath}/dist/app.bundle.js"></script>
{/block}
</html>

v latte modalu mam tento JS a ten Custombox je natažen v bundlu

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        var modal = new Custombox.modal({
            content: {
                effect: 'fadein',
                target: '#modal'
            }
        });
    });
</script>

A pokud si chceš udělat např. nette komponentu, která bude mít uvnitř svého latte modal JS kód, který se načte přes bundle ?
Nebo jak např. tyto vrstvy navrhuješ ?

Díky

Editoval kiCkZ (28. 5. 2019 20:19)

Martk

Co například takhle?

<a data-modal="#modal">Modal</a>

$('html').on('click', '[data-modal]', function() {
		var modal = new Custombox.modal({
            content: {
                effect: 'fadein',
                target: $(this).data('modal'),
            }
        });

		modal.show();
});

kiCkZ

\→ Martk napsal(a):
>

Co například takhle?

<a data-modal="#modal">Modal</a>

$('html').on('click', '[data-modal]', function() {
		var modal = new Custombox.modal({
            content: {
                effect: 'fadein',
                target: $(this).data('modal'),
            }
        });

		modal.show();
});

A tohle co si napsal by si umístil kam ? Také do souboru app.js co je vstupní soubor pro webpack ?

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('style.bundle.css');

module.exports = {
    entry: {
        app: './www/js/app.js',
    },
    output: {
        path: path.join(__dirname, 'www/dist'),
        filename: '[name].bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: extractCSS.extract([
                    'css-loader',
                    'postcss-loader'
                ])
            }
        ]
    },
    plugins: [
        extractCSS
    ]
};

Editoval kiCkZ (28. 5. 2019 22:22)

Martk

Udělej z toho samostatný soubor a umístí do správné složky.

Kód bude vypadat asi takto: (složka např. plugins/data-modal.js)

import * as $ from 'jquery';
// pak asi import Custombox

$('html').on('click', '[data-modal]', function() {
        var modal = new Custombox.modal({
            content: {
                effect: 'fadein',
                target: $(this).data('modal'),
            }
        });

        modal.show();
});

a v app.js

import './plugins/data-modal';

Entry point používám jen jako loader, jsou tam jen import nic jiného.

Editoval Martk (29. 5. 2019 10:05)