Jestem nowy browserify i próbuje załadować moduły NPM w przeglądarce, ale ja otrzymuję następujący błąd:wymagają nie definiuje błąd z browserify

Uncaught ReferenceError: require is not defined

Jestem po kursie z http://browserify.org/. Utworzony plik JavaScript o następującej treści:

var unique = require('uniq');

następnie uruchomić

npm install uniq

browserify main.js -o bundle.js

plik bundle.js jest generowany i włączyła ją w moim html ale nadal uzyskiwanie powyżej błędu. Jakieś pomysły, co robię źle?

To jest treść końcowego pliku HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <script src="bundle.js"></script> 
    <script src="script.js"></script> 
</head> 
<body> 

</body> 
</html>

To jest treść bundle.js: http://pastebin.com/1ECkBceB

a to script.js:

var unique = require('uniq');

Źródło

2015-02-24 King Julien

Możesz pisać więcej kod kontekst? Jaka jest zawartość bundle.js i script.js? – sma

@sma Właśnie zaktualizowałem pytanie z zawartością obu plików. –

Funkcja "Wymagaj" jest dostępna tylko w kontekście skryptu "bundle.js". Browserify weźmie wszystkie potrzebne pliki skryptów i umieści je w pliku "bundle.js", więc powinieneś tylko dołączyć plik "bundle.js" do pliku HTML, a nie "script.js".

Źródło

2015-02-24 13:11:41 kevinvile

, więc nie mogę wymagać modułu, który w pakiecie razem w tym celu ..? –

Możesz użyć "require" w kodzie źródłowym, który napiszesz, zanim uruchomisz przeglądarkę na nim. Tak więc w twoim źródłowym javascript możesz wymagać dowolnych modułów, a kiedy przejrzysz w przeglądarce, zwrócisz całe źródło (łącznie z wymaganymi modułami) do pliku "bundle.js", do którego możesz się odwołać w swoim html. Mam nadzieję, że pomaga! – kevinvile

Rozumiem teraz - przeglądarka nie tworzy modułu, którego możesz wymagać() od przeglądarki - pakuje twój kod i zawija wszystko w zamknięcie - potrzebujesz specjalnych kroków, aby stworzyć bibliotekę, z której możesz korzystać w przeglądarce. Wymyślę te kroki i dodam je do tej odpowiedzi, ponieważ znaczna liczba osób popełni to samo nieporozumienie co OP i ja. – gburton

Krótki odpowiedź: usuń skrypt script.js import

Dłuższa odpowiedź: Otrzymujesz błąd, ponieważ metoda require nie została zdefiniowana w przeglądarce. Nie powinieneś włączać script.js.

Ideą przeglądarki Browserify jest to, że można dzielić źródła za pomocą modułów CommonJS i pakować je do jednego pliku, który będzie używany w przeglądarce. Browserify przetrawi wszystkie twoje źródła i połączy wszystkie pliki require d w pakiecie.

Źródło

2015-02-24 13:11:08 thomaux

Ja osobiście wolę zachować oddzielny kod biblioteczny i kod aplikacji. Tworzę również coś w rodzaju bundle.js i script.js.

Istnieje proste rozwiązanie, które sprawia, że to działa. Jest gdzieś w moim browserify akt:

window.require = require;

to narazi require do nazw „globalnej”. Możesz wtedy wymagać od ciebie wszystkiego, co chcesz, od script.js.

Daje się jednak JEDNĄ korzyść: trzeba będzie uwzględnić wszystkie wymagane biblioteki w pliku przeglądarki. Nie dostaniesz wtedy luksusu znajdowania wszystkich swoich zależności!

W pełni oczekuję, że ludzie będą płakać "brudny hack" lub "to nie tak powinno być". Tak, może. Ale chcę te pliki oddzielne. I dopóki nie uwzględnię niczego innego, co nazywa się "wymaganiem", wszystko będzie dobrze, dziękuję bardzo.

Czasami jeden globalny może mieć znaczenie.

Źródło

2015-08-18 21:30:06 amenthes

Wygląda na to, że aby uruchomić taki skrypt, musisz użyć samodzielnego w pakiecie.

browserify main.js --standalone Bundle > bundle.js

Po tym należy mieć window.Bundle w bundle.js.
W tym momencie powinieneś być w stanie uzyskać dostęp z script.js.

jeśli używasz chrząknięcie

Jeśli używasz grunt zainstalować grunt-browserify.

npm install grunt-browserify --save-dev

A potem na grunt.js Gruntfile:

// Add the task 
grunt.loadNpmTasks('grunt-browserify'); 

// Add the configuration: 
browserify: { 
    dist: { 
     options: { 
      // uncomment if you use babel 
      // transform: [ 
      //  ["babelify", { "presets": ["env"] }] 
      // ], 
      browserifyOptions: { 
       standalone: 'Bundle' 
      } 
     }, 
     files: { 
      "bundle.js": ["main.js"] 
     } 
    } 
},

jeśli używasz łyk

// on your build task 
var bundled = browserify('main.js', { standalone: 'Bundle' }) 
       .bundle() 
       .pipe(source('bundle.js')) 
       .pipe(gulp.dest(outDir));

Zobacz here dla Chart.js pliku haustem.

jeśli używasz Babel

Jeśli używasz Babel i es6 prawdopodobnie eksportowania swoją klasę Bundle.

// you should have something like that 

class Bundle { 
    ... 

} 

export default Bundle;

Więc dlatego babel teraz używać Bundle należy użyć Bundle.default i tak:

// in script.js 
var bundle = new Bundle.default();

Aby uniknąć tej składni można przesłonić Bundle z Bundle.default.

Pod koniec bundle.js wstawić:

window.Bundle = window.Bundle.default;

Więc teraz musisz:

// in script.js 
var bundle = new Bundle.default();

Źródła

Standalone browserify builds

Źródło

2017-01-05 03:21:42 borracciaBlu

wymagają nie definiuje błąd z browserify

Odpowiedz

jeśli używasz chrząknięcie

jeśli używasz łyk

jeśli używasz Babel

Źródła

Powiązane problemy