開始瀏覽

隨著我們稱之為網絡的美麗野獸，JavaScript實現越來越複雜。我們中的許多人現在都使用JavaScript模塊 - 獨立運行的組件，這些組件融合在一起，可以作為整體的整體工作，但可以愉快地更換任何組件而不會導致大會。我們中的許多人一直在使用AMD模塊模式和requirjs來完成此操作。 去年

>，瀏覽使現場引起了很多興奮。隨著塵埃開始沉降，我想編寫一個概述，概述瀏覽的是什麼，其工作原理以及將其添加到您的工作流中的一些選項。

>

鑰匙要點

瀏覽允許通過將依賴項捆綁到一個JavaScript文件中，直接在瀏覽器中使用node.js樣式模塊。

要開始使用瀏覽器，您需要node.js，npm（默認情況下使用node.js安裝），然後瀏覽自身，可以使用`npm install -g browserify`。
• >
browserify browserify自身安裝。 通過使用require（）語句，類似於node.js，
• 瀏覽簡化了項目中的外部庫，並且還可以生成源地圖，以便於調試。
>您可以使用NPM腳本或諸如Gulp和Grunt之類的任務跑步者自動化瀏覽過程，從而提高工作流程效率並減少手動捆綁工作。
• >在瀏覽項目中管理依賴項使用`package.json`文件都簡化了，該文件指定了項目詳細信息和所需的NPM軟件包，允許其他人使用npm install”設置項目。
• 什麼是瀏覽？
瀏覽允許我們在瀏覽器中使用node.js樣式模塊。我們定義依賴項，然後瀏覽將其全部捆綁到一個整潔且整潔的JavaScript文件中。您使用require（'./ yourfancyjsfile.js'）語句包括所需的JavaScript文件，還可以從NPM導入公開可用的模塊。瀏覽器為您生成源地圖也很簡單，以便您可以單獨調試每個JS文件，儘管事實都將其加入其中。
• 為什麼導入節點模塊？
>
• >導入模塊是一種祝福 - 而不是訪問一系列網站以下載javaScript的庫，而只需使用requiend（）語句將它們包括在內，請確保已安裝模塊，並且您可以使用。常用的JQUERY，下劃線，骨幹甚至是角（作為非官方分佈）等常用的JavaScript庫都可以使用。如果您在已經運行節點的網站上工作，則可以通過一種構造所有JS的常見方法來進一步簡化事物。我真的很喜歡這個概念。

您需要的

開始瀏覽，您需要的最低限度是：>

• npm - 默認情況下使用節點安裝。
>
• 瀏覽 - 我將解釋如何安裝此操作。
>
• >一包JavaScript模塊，您可以馴服！
入門

為了開始，您需要在計算機上安裝節點和NPM。如果您正在尋找安裝這些指南，請前往上面的鏈接。如果您完全卡住了，請嘗試通過軟件包管理器安裝Node.js的這些說明。您實際上無需進行任何節點工作即可使用瀏覽。我們僅僅因為NPM運行它而安裝節點。獲得NPM後，您可以使用以下命令安裝瀏覽：

>

我們在這裡正在使用的是使用NPM在您的計算機上全球安裝瀏覽器（-G告訴NPM全球安裝模塊）。 >

如果您獲得以下內容的錯誤：

npm install -g browserify

>

然後，您有一個權限問題。您可以Sudo命令，但我建議您改用此帖子。

>

創建第一個瀏覽文件

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

>首先創建一個瀏覽式JavaScript文件，該文件導入一個非常受歡迎的模塊下劃線。我們將使用下劃線來追踪超人。我已經打電話給我的js文件main.js，並將其放在項目中的JS文件夾中。

>

我們首先使用browserify的require（）語句在我們的javaScript中分配_變量：

接下來，我們將使用每個（）和find（）函數。我們將搜索兩個名稱陣列並運行一個控制台。 log說它是否看到超人。 Lex Luthor只能夢想的高級東西。我們的最終JavaScript代碼看起來像這樣：

>我們要確保瀏覽器在嘗試將其添加到我們的項目中時可以找到NPM模塊。這樣做的裸露基礎是打開您的終端，導航到保存您的JavaScript項目的文件夾，然後運行此命令以在該文件夾中安裝下劃線：>

<span>var _ = require('underscore');</span>

對於那些不熟悉節點和NPM工作方式的人，這會在您的項目中創建一個名為Node_modules的文件夾，該文件夾在您的下劃線模塊中保存代碼。該命令從https://registry.npmjs.s.org/underscore中從NPM存儲庫中檢索最新版本的下劃線。使用我們的node_modules文件夾中的該模塊，瀏覽器現在可以找到並使用它。

首次運行瀏覽

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

>運行瀏覽時，它將需要使用我們所有附加的模塊構建一個新的JavaScript文件。在這種情況下，它將在其中構建一個帶有下劃線的JavaScript文件。我們需要決定這個新文件的名稱，我已經使用了Findem.js。我從項目的根文件夾中運行此命令：

npm install -g browserify

此命令讀取您的main.js文件，然後將其輸出到由-O選項定義的Findem.js文件中。我包含了-d選項，以便它也可以為我們生成源地圖，這樣我們就可以調試main.js，並以單獨的文件為單獨。

>

使用瀏覽輸出

>從那裡開始，就像其他任何JS文件一樣簡單地包含頁面上的文件：>

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

>導入您自己的JavaScript文件

>您的所有應用程序不太可能來自節點模塊。要包含您自己的JavaScript，您可以使用相同的require（）函數。以下JavaScript行將導入一個名為your_module.js的JS文件中的greatestModuleever變量：>

要導入這樣的JavaScript，我們只需要將JavaScript構造為模塊即可。為此，我們必須定義模塊。一種做到這一點的方法如下所示。

<span>var _ = require('underscore');</span>

旁注！

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

>如果您有一堆不在NPM中的JavaScript庫，並且您正在尋找一種使所有這些庫將所有這些庫進行瀏覽的方法，則可以使用browserify-shim npm模塊為您使用瀏覽器NPM模塊為您轉換這些文件。我們不會在本文中使用它，但是有些開發人員可能渴望進行。

我們的模塊

的示例

給出一個簡單的示例，說明它的工作原理，我們將從上一個超級英雄搜索示例中取出數組，並用返回名稱數組的單獨的JS模塊替換它們。該模塊看起來像：

接下來，我們將使用名稱= require（'./ names.js'）將該模塊導入我們的代碼中：

npm install underscore

>我們的名稱變量引用來自我們模塊的導出函數。因此，當我們將名稱數組傳遞給Findsuperman（）函數時，我們將上面的名稱變量用作具有括號的函數。

>從您的命令行中運行該瀏覽命令以對其進行編譯，在瀏覽器中打開它，並應按預期運行，搜索數組中的每個值並記錄它是否看到超人：

browserify js/main.js -o js/findem.js -d

>

傳遞變量並在我們的應用程序上共享模塊

要在這個相當簡單的超人狩獵應用程序中添加更複雜的性能，讓我們將FindSuperman（）函數變成模塊。這樣，從理論上講，我們可以在JavaScript的各個部分找到超人，並且我們總是可以很容易地用更有效的模塊代替超人狩獵模塊。

我們可以將變量傳遞給我們的模塊並在模塊中使用它們。 Exports函數，因此我們將在名為findsuperman.js的文件中創建一個模塊，該模塊希望給出一個名稱數組：

>

npm install -g browserify

>我已經為我們的FindSuperman（）函數添加了一個返回值。如果找到超人，它將返回真實。否則，它將返回false。它取決於使用此模塊來決定使用此真實值的代碼。但是，上面的模塊中我們缺少一件事。我們在功能中使用了下劃線，但尚未宣布它。我們也可以在模塊本身中在頂部聲明它：

>

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

使用瀏覽時，它將瀏覽所有導入的JS文件，並且只會導入一次提到的每個模塊。因此，我們需要在主JS文件中下劃線，並且在FindSuperman.js中需要它，但是當browserify packages ast all tall up時，它只會將其放入我們的最終JS文件中。很好嗎？

>我們實際的JavaScript應用程序現在將使用我們的新模塊，其新的返回的true/false值。出於演示的目的，我們只堅持一個簡單的文檔。

<span>var _ = require('underscore');</span>

>我們甚至不需要在我們的主JS文件中導入下劃線，因此您可以在沒有任何戲劇的情況下將其刪除。最終，它仍將通過包含在findsuperman.js文件中導入。

>

>使用package.json

管理瀏覽的npm依賴項

說您有一個敏銳的朋友，他也想使用您的代碼。很難期望他們知道他們需要首先安裝NPM下劃線模塊。解決方案是創建一個名為package.json的文件。該文件為您的項目提供了名稱（請確保此處的名稱中沒有空格），描述，作者，版本，最重要的是我們的情況 - NPM依賴項列表。對於那些使用Node開發的人，我們在這裡使用完全相同的內容：

依賴項列表當前僅限於我們的單個“下劃線”：“ 1.6.x”，其中依賴項的第一部分是名稱，第二部分是版本。最新或 *將檢索NPM最新版本。另外，您可以輸入1.6（版本1.6）和1.6.x（版本1.6.0到但不包括1.7）等數字。

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

>

>我們還可以將瀏覽器作為依賴性包括在內，但是它不是項目運行的依賴性 - 我們應用程序的任何用戶都可以找到超人而無需運行瀏覽。這是我們的DevDedies之一 - 開發人員對此應用進行更新所需的模塊。 >

>現在我們有了一個package.json文件，我們不需要讓我們的朋友運行NPM安裝下劃線。他們只能運行NPM安裝，所有必要的依賴項將安裝到其Node_modules文件夾中。

自動瀏覽過程

每次更改文件很煩人而根本不方便的文件時，

在命令行中運行瀏覽。幸運的是，有幾種可以自動運行瀏覽的選項。

>

> npm

NPM本身可以像手動輸入的命令行一樣運行命令行腳本。為此，只需將腳本部分放入您的軟件包。

要運行，您可以在命令行中輸入以下內容：>

npm install -g browserify

>但這還不夠方便。我們仍然必須每次手動運行該命令。那很煩人。因此，一個更好的選擇是使用稱為Watchify的NPM模塊。 Watchify很簡單，很容易，而且可以節省大量時間。它將注意您的JS的更改，並自動重新運行瀏覽。

>

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

將其添加到我們的軟件包中。 JSON，我們將其添加到我們的devDections中，並包含一個新腳本來觀看我們的JS（當我們確實想構建JS而無需更改的時，請在此處留在build-js。文件）。

要運行此，只需輸入以下命令。

>

<span>var _ = require('underscore');</span>

>它將運行並發揮其魔力。不過，讓您知道發生了什麼事，這可能會令人困惑。如果您希望它能為您的所做工作提供詳細信息，請將-v添加到您的watchify命令中：

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

>每次運行時都會為您提供這樣的反饋：

>

npm install underscore

在NPM

中生成源地圖

browserify js/main.js -o js/findem.js -d

>要使用NPM生成源地圖，添加-d瀏覽或watchify命令：

>

具有用於調試的-d和-v在Watchify中的詳細輸出，您可以像這樣組合它們：

>

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

grunt

greatestModuleEver <span>= require('./your_module.js');</span>

>很多人（包括我自己）已經使用了一段時間了，並且已經習慣了。幸運的是，對於這種類型的瀏覽也可以與咕unt彈性構建一起效果！

>

>我們需要更改包裝。我們將不再使用腳本部分，而是要依靠腳步。取而代

我們已經添加了依賴項：

module<span>.exports = function(vars) {
</span>  <span>// Your code
</span><span>}</span>

grunt - 確保我們為該項目安裝了咕unt聲。 >

> grunt-browserify - 允許您在grunt中運行瀏覽的模塊。

> grunt-contrib-watch - 將觀看我們的文件並在任何更改時運行瀏覽的模塊。
然後，我們在項目的根部創建一個名為Gruntfile.js的文件。在此咕unt文件中，我們將有以下內容：
• >
• 我們通過加載包裝中需要的NPM模塊來開始。

我們註冊了我們要運行的一組任務，作為我們的默認任務（瀏覽和觀看）：

module<span>.exports = function() {
</span>  <span>return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
</span><span>}</span>

我們設置了我們的grunt initconfig對象（所有grunt文件都為此）： 在其中，我們指出了封裝的位置。

npm install -g browserify

>我們的瀏覽設置將是下一個，它們基本上是在我們的瀏覽代碼和我們希望將其構建的文件的源js文件所在的位置進行設置：

然後，我們設置了一個手錶任務，以重新運行我們的瀏覽任務。

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

>由於我們的新DEV依賴性（我們的項目中沒有安裝咕unt聲，也沒有這些模塊中的任何一個），因此我們需要先安裝NPM。允許它運行並安裝任何模塊後，您就可以運行如此簡單的GruntCommand以開始觀看您的項目。

>

<span>var _ = require('underscore');</span>

在grunt

中生成源地圖

>具有Grunt-Browserify版本2.0.1版本，需要定義源地圖的方式更改源地圖，從而導致許多指南在線不正確！正確的咕unt和瀏覽以生成源地圖的正確方法是添加調試：true Inside bundleoptions之類的選項中的bundleoptions之類的選項：

設置複雜的外觀選項旨在允許以一個不錯且易於兼容的方式包含未來的瀏覽選項。

>

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

gulp

Gulp是瀏覽的小報愛好者。網絡周圍的文章經常瀏覽和吞噬兩者，這是在天堂製作的最前沿的JavaScript構建過程。我不會說瀏覽粉絲需要使用Gulp，這主要是不同語法之間的個人喜好。您可以（如上所述）非常高興地使用NPM或咕unt來構建您的瀏覽文件。我個人是針對較小項目的干淨，簡單的NPM構建過程的粉絲。

>

要在Gulp中進行以上操作，我們將從全球安裝Gulp開始：

我們將更新我們的package.json文件，以包括一些我們需要的新devDendioncy。

我們添加了以下內容：

>

npm install underscore

> Watchify - 我們在NPM示例中也使用了上面的內容。相同的模塊。

browserify js/main.js -o js/findem.js -d

gulp - 給我們所有散裝好善良的相當重要的模塊！

>

>乙烯基 - 源式流 - 這是該模塊輸入並返回文件供我們放在某個地方的文件。

>瀏覽具有用於其輸出的流API，我們可以直接在Gulp中使用。一堆指南將建議使用Gulp-Browserify插件，但是瀏覽不建議您使用Browserify的流媒體API輸出。我們使用乙烯基 - 源流來拾取此瀏覽輸出，並將其放入文件中供我們輸出。 然後，我們在我們項目的根源中創建一個名為Gulpfile.js的文件。這是所有墨西哥溝渠功能都將進入的地方：
• >
• 我們首先在我們的NPM模塊中導入，這是相當自我解釋的。 然後，我們為構建設置了三個變量：
• > sourceFile - 我們瀏覽文件的位置和文件名（在本例中為JS/main.js）>
> DESTFOLDER - 我們正在將最終文件輸出到>的文件夾位置
• destfile - 我們希望最終文件具有
>的文件名
我將在下面的更多詳細信息中解釋代碼。
>

>瀏覽和吞噬如何一起工作

我們的第一個任務是我們的瀏覽器，我們像這樣定義了一個任務：

>
它首先將我們的main.js文件傳遞到瀏覽npm模塊中：

npm install -g browserify

然後，我們使用browserify流api返回帶有JavaScript內容的可讀流：

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

>從那裡，我們將其輸送到使用文件名findem.js的文件中，然後將其送到gulp以放入我們的JS文件夾中。

<span>var _ = require('underscore');</span>

>我們基本上是通過各個階段進行輸入，這些階段會導致我們的最終項目，這應該是一個閃亮的新JavaScript文件！

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

結合觀察和吞噬

>如前所述，直接使用瀏覽器有點煩人，因為更新文件時自動運行的運行要容易得多。為此，我們再次使用Watchify NPM模塊。

>

我們首先設置一個名為Watch的任務（如果您願意的話，您可以稱其為Watchifify…確實取決於您）：

我們將觀察模塊分配給Bundler變量，因為我們將使用兩次

npm install underscore

然後，我們添加一個事件處理程序，該事件處理程序在調用更新事件時，該函數都稱為Rebundle（）。基本上，每當Watchify看到文件更改時，它將運行Rebundle（）：>

>什麼是rebundle（）？這幾乎完全是我們瀏覽任務上面正在做的事情：

>

browserify js/main.js -o js/findem.js -d

>有可能在一些敏銳的JavaScript優化中合併瀏覽和觀察，但我決定在本文中分開它們，以使事情變得簡單。有關此事的令人印象深刻，更複雜的例子，請查看Dan Tello的入門Gulp File。

為了完成我們的Gulpfile.js，我們定義了我們的默認任務，該任務的工作方式與grunt中的默認任務相同。

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

要運行上述GULP代碼，您有三個選擇。最簡單的方法是運行您執行的默認任務，該任務在命令行上只需要一個單詞：>

greatestModuleEver <span>= require('./your_module.js');</span>

>將運行一次瀏覽任務，手錶任務將開始觀看任何更改的文件。

您還可以專門運行您的瀏覽任務：

module<span>.exports = function(vars) {
</span>  <span>// Your code
</span><span>}</span>

或您的手錶任務：

module<span>.exports = function() {
</span>  <span>return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
</span><span>}</span>

使用Gulp生成源地圖並瀏覽

>為您的JavaScript生成源地圖，在兩個bundle（）functions中include {debug：true}

我們的瀏覽任務看起來像：

<span>var _ = require('underscore'),
</span>  names <span>= require('./names.js');
</span>
<span>findSuperman(names());
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

我們的手錶任務中的rebundle（）函數看起來像：

>

npm install -g browserify

結論

>瀏覽的早期仍然很早，隨著時間的流逝，它肯定會發展並成熟。在目前的狀態下，它已經是一個非常方便的工具，用於構建模塊化JavaScript，對於那些在後端使用節點的人來說尤其出色。在項目的正面和後端使用NPM模塊時，代碼對於節點開發人員來說變得更加干淨。如果您尚未瀏覽鏡頭，請在下一個JavaScript項目中嘗試一下，看看它是否震撼了您的世界。

>

其他資源

>還有大量其他瀏覽資源。您可能想檢查一下一些方便的零件：

• 瀏覽手冊 - 詹姆斯·哈利迪（James Halliday）在瀏覽中始終有價值的手冊。絕對值得一讀！
• Gulp瀏覽：Dan Tello的所有內容 - 真正詳盡的文章，顯示了更多高級用法。
• 就像那個咕unt聲和啟動j一樣，這一切都與吞噬和瀏覽一樣 - 馬丁·日內夫（Martin Genev）談到了他突然的conversion依，以一個例子瀏覽和大量吞噬。
> Gulp.js的簡介 - 有關如何使用Craig Buckler的更多信息。

>常見問題（常見問題解答）有關瀏覽的開始

>瀏覽的主要目的是什麼？

browserify是一個開發工具，它允許開發人員編寫node.js風格的模塊，用於瀏覽器中用於瀏覽器。使用瀏覽器，您可以在瀏覽器中捆綁所有依賴項，在瀏覽器中需要（“模塊”）。該工具特別有用，因為它使您可以直接在瀏覽器中使用大多數NPM軟件包，從而可以大大加快開發過程。

>

瀏覽器與其他模塊式捆綁器有何不同？與其他模塊捆綁器不同，瀏覽器的專門設計為允許開發人員為瀏覽器編寫Node.js風格的模塊。它通過遞歸分析應用程序中的所有require（）調用以構建捆綁包來實現此目的，您可以在單個腳本標籤中使用瀏覽器。瀏覽器還具有豐富的插件生態系統，它允許您在很大程度上自定義構建。

>

>我如何安裝瀏覽器？

您可以使用npm在系統上在系統上安裝瀏覽器（node（node）軟件包管理器）。此的命令是“ NPM install -G瀏覽”。安裝後，您可以使用它從命令行使用它來捆綁JavaScript文件。

我如何在項目中使用browserify？

使用browserify，您首先需要使用代碼來使用代碼CONCORJS模塊格式。然後，您可以使用browserify從命令行中匯集主JavaScript文件，並將其所有依賴項捆綁到一個文件中。然後，可以使用腳本標籤將此捆綁的文件包含在您的HTML文件中。 >

>我可以將ES6模塊用於瀏覽嗎？

是的，您可以使用瀏覽器的ES6模塊，但是您需要使用像babel這樣的轉板器將ES6代碼轉換為ES6代碼，以瀏覽的ES5代碼。您可以通過安裝babel和babelify變換來執行此操作，然後在瀏覽命令中使用它們。

>我如何在瀏覽器中使用瀏覽器中的npm軟件包？

直接在瀏覽器中使用大多數NPM軟件包。為此，您首先需要使用NPM安裝軟件包。然後，您可以在JavaScript文件中需要包裝，並且瀏覽將確保它包含在捆綁包中。

>

> browserify中的變換是什麼？

轉換是browserify用於編譯或編譯用途的插件轉換您的代碼。例如，您可以使用Babelify轉換將ES6代碼編譯為ES5代碼。轉換可以在全球或特定文件上應用，您可以在項目中使用多個變換。

如何調試我的捆綁代碼？

browserify具有用於生成源的內置選項地圖，可以幫助您調試捆綁的代碼。要生成源地圖，您可以在瀏覽命令中使用“ –debug”選項。這將包括您的捆綁包中的源映射數據，然後可以由瀏覽器的開發人員工具使用，以幫助您調試代碼。

>

我可以將browserify與諸如gulp或grunt一樣的任務跑步者使用？ 🎜>是的，您可以將瀏覽器與諸如Gulp或Grunt之類的任務跑步者使用。 Gulp和Grunt都有可用的插件，可用於將瀏覽器集成到您的構建過程中。這可以有助於自動化捆綁JavaScript文件的過程。

如何優化生產的捆綁包？

>>有幾種方法可以優化您的瀏覽器捆綁包進行生產。一種常見的方法是使用諸如uglifyjs之類的工具來縮小捆綁包。您還可以使用“微型”插件，這是一個瀏覽插件，可對捆綁包進行各種優化，以使其盡可能小。

以上是開始瀏覽的詳細內容。更多資訊請關注PHP中文網其他相關文章！