Załaduj wersję debugowaną gotowego modułu przez npm/webpack

Question

Istnieje biblioteka javascript, wstępnie zbudowana i dostępna na npm, którą chcę rozwinąć za pomocą/debug. W moim przypadku jest to openlayers.

W klasycznej drodze wymagające plik JavaScript i chęć do debugowania, można by po prostu przełączyć URL skryptu z wersji produkcyjnej wersji debug, tj:

do

Jednak podczas korzystania z pakietu internetowego, a następnie importowania za pośrednictwem npm:

import openlayers from 'openlayers' 

Dostarcza dystrybucję produkcyjną e biblioteka, taka sama jak skrypt ol.js z góry.

Na marginesie, aby zatrzymać WebPack próbuje zanalizować wstępnie utworzonych biblioteki i rzucać ostrzeżenie o które trzeba zawierać coś takiego:

// Squash OL whinging 
webpackConfig.module.noParse = [ 
    /\/dist\/ol.*\.js/, // openlayers is pre-built 
] 

Powrót do problemu pod ręką: Jak mogę warunkowo obciążenia inny punkt wejścia dla modułu, który został wcześniej tak skonstruowany i zaimportowany?

Oczywiście, mogę to zrobić w hacky sposób. Przechodząc do node_modules/OpenLayers/package.json i przełączania pole przeglądarki z

"browser": "dist/ol.js", 

do

"browser": "dist/ol-debug.js", 

Czy istnieje sposób mogę poprosić o inny punkt wejścia poprzez WebPacka lub przy użyciu innego importować składnię? Czy muszę najpierw poprosić opiekunów biblioteki o aktualizację pola przeglądarki, aby umożliwić różne wskazówki dotyczące punktów wejścia do przeglądarek, zgodnie ze specyfikacją? https://github.com/defunctzombie/package-browser-field-spec

Myśli na temat bardziej skutecznego sposobu, aby tak się stało? Tęsknota za możliwością programowego przełączania ładowania wersji produkcyjnej i debugowania biblioteki na podstawie zmiennych env.

Answer 1

WebPACK posiada opcje konfiguracyjne wymiana modułu na inną ścieżkę: https://webpack.github.io/docs/configuration.html#resolve-alias

to rozwiąże import openlayers użyć wersji debug:

webpackConfig.resolve.alias: { 
    openlayers: 'openlayers/dist/ol-debug.js' 
} 

W moim systemie kompilacji Mam funkcję, która przyjmuje typ środowiska i zwraca pasujący pakiet webpackConfig. Na podstawie parametru I uwzględnij powyższy fragment lub nie. Pełny kod: webpack-multi-config.js

Mam dwa różne (łyk-) zadania dla rozwoju i produkcji. Na przykład zadanie produkcyjne: webpackProduction.js Line 1 importuje skrypt konfiguracyjny z production jako typ.

Mój system budowy opiera się na gulp starter.