开始浏览-js教程-PHP中文网

开始浏览

随着我们称之为网络的美丽野兽，JavaScript实现越来越复杂。我们中的许多人现在都使用JavaScript模块 - 独立运行的组件，这些组件融合在一起，可以作为整体的整体工作，但可以愉快地更换任何组件而不会导致大会。我们中的许多人一直在使用AMD模块模式和requirjs来完成此操作。去年

>，浏览使现场引起了很多兴奋。随着尘埃开始沉降，我想编写一个概述，概述浏览的是什么，其工作原理以及将其添加到您的工作流中的一些选项。

钥匙要点

浏览允许通过将依赖项捆绑到一个JavaScript文件中，直接在浏览器中使用node.js样式模块。

>
浏览简化了项目中的外部库，并且还可以生成源地图，以便于调试。
>在浏览项目中管理依赖项使用`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中运行浏览的模块。

>
我们通过加载包装中需要的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 - 给我们所有散装好善良的相当重要的模块！

>乙烯基 - 源式流 - 这是该模块输入并返回文件供我们放在某个地方的文件。

>
我们首先在我们的NPM模块中导入，这是相当自我解释的。然后，我们为构建设置了三个变量：

> sourceFile - 我们浏览文件的位置和文件名（在本例中为JS/main.js）>

>的文件夹位置

destfile - 我们希望最终文件具有

>的文件名

我将在下面的更多详细信息中解释代码。

>浏览和吞噬如何一起工作

我们的第一个任务是我们的浏览器，我们像这样定义了一个任务：

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中文网其他相关文章！

开始浏览

您需要的

>

使用浏览输出

>npm install -g browserify登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

管理浏览的npm依赖项

> npm

>

>

要在Gulp中进行以上操作，我们将从全球安装Gulp开始：

我们的第一个任务是我们的浏览器，我们像这样定义了一个任务：

>

结论

其他资源

>常见问题（常见问题解答）有关浏览的开始

>我可以将ES6模块用于浏览吗？

>我如何在浏览器中使用浏览器中的npm软件包？

> browserify中的变换是什么？

如何调试我的捆绑代码？

>
npm install -g browserify
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制