wersja publiczna strony www - bundling etc

Question

Witam,

jestem jeszcze dość zielony w webdev i trochę się już pogubiłem. Przejdę zatem do sedna - mam wersję produkcyjną strony, która zawiera kilka dokumentów html, trochę zdjęć, kilka arkuszy css, kilka bibliotek js i dwa pliki js. Chciałbym to teraz przepuścić przez webpack w ten sposób, aby otrzymać te kilka dokumentów html wraz z jednym plikiem css i jednym js. 

Nie bardzo jednak wiem jak to zrobić. Domyślam się, że np. w przypadku jquery wystarczy samo 

require('jquery')

niemniej jednak w przypadku różnych jquerowych pluginów nie uda mi się zrobić tego tak prosto. W związku z tym zdaje się, że trzeba użyć metody module.exports w ich kodach źródłowych, co zrodzi potrzebę przepisania ich jako obiekt, co po minifikacji daje nam tony pracy. Dlatego też wydaje mi się, że w moim rozumowaniu zachodzi jakiś poważny błąd. 

Mógłby mi ktoś łopatologicznie i po kolei wytłumaczyć jak się to normalnie robi?

Answer 1

To zalezy, czy używasz common,require czy ES6, każdy inaczej robi. 

CSS? Webpack? Pierwsze słyszę.

Ja używam node-sass daje radę ;).

Nie bardzo jednak wiem jak to zrobić. Domyślam się, że np. w przypadku jquery wystarczy samo 

plain-text

Kopiuj

?

1	require('jquery')

Jak masz zaintalowane jako node_modules. 

niemniej jednak w przypadku różnych jquerowych pluginów nie uda mi się zrobić tego tak prosto. W związku z tym zdaje się, że trzeba użyć metody module.exports. 

Nie choć to zależy czy ściągałeś za pomocą npm. Dwa zależy od użytej biblioteki. Module.exports należy do Node.js.

https://nodejs.org/api/modules.html

Zakładam, że używasz common.js

http://requirejs.org/docs/commonjs.html

A wiesz, że babel domyślnie nie obsługuje common.js. Nie wiem czy Treaceur potrafi. However możesz użyć webpack ale musisz mu jasno wskazać co gdzie jak. 

Babel 6 Changes

Babel 6 changed some behavior by not doing module.exports = exports['default'] anymore in the modules transforms.

There are some caveats, but you can use babel-plugin-add-module-exports, so that updating to Babel 6 isn't a breaking change since users that don't use ES modules don't have to do require("your-module").default.

However, it may not match how Node eventually implements ES modules natively given the the current proposal.

Rollup.js to potrafi.

Tu masz jego konfiguracje.

https://rollupjs.org/#using-config-files

 niemniej jednak w przypadku różnych jquerowych pluginów nie uda mi się zrobić tego tak prosto.

Przecież każdy z tych pluginów odwołuje się do Jquery ;p. Ba jak spojrzysz do kodu obiektu po webpacku, zobaczysz odwołowania do klucza jQuery.

W związku z tym zdaje się, że trzeba użyć metody module.exports w ich kodach źródłowych

Możesz z poziomu klasy/modułu wywoływać listenery, bądż importować do modelu

co zrodzi potrzebę przepisania ich jako obiekt, 

jQuery jest obiektem, moduł jest obiektem i funkcja jest też obiektem! I zarówno obiekt,moduł i funkcję możesz eksportować.

co po minifikacji daje nam tony pracy

To nie jest munifikowanie, a bundlowanie kodu. Webpack za nas większośc robi. Jak chcesz munifikować to użyj tego --> uglefify