使用Babel和WebPack设置ES6项目

在本文中，我们将考虑使用Babel和WebPack创建用于处理现代JavaScript（在Web浏览器中运行）的构建设置。>

>这是确保我们的现代JavaScript代码尤其与与其他浏览器更广泛的兼容。 与大多数与Web相关的技术一样，JavaScript一直在不断发展。在过去的美好时光中，我们可以将几个<script>标签放入页面上，也许包括jQuery和几个插件，然后很好。 但是，自从引入ES6以来，事情变得越来越复杂。浏览器对较新的语言功能的支持通常是斑驳的，并且随着JavaScript应用程序变得更加雄心勃勃，开发人员开始使用模块来组织其代码。反过来，这意味着，如果您今天写现代JavaScript，则需要在您的流程中介绍一个构建步骤。<p>> 从下面的链接中可以看到>，从ES6转换为ES5大大增加了我们可以支持的浏览器数量。 <p> eS6兼容性<p> ES5兼容性 <p> 构建系统的目的是自动化为浏览器和生产准备代码所需的工作流程。这可能包括将诸如将代码转换为不同标准的步骤，将SASS汇总到CSS，捆绑文件，缩小和压缩代码等。为了确保它们始终可重复，需要从单个命令中启动已知序列的步骤。<ul> <li>钥匙要点 <li> >利用Babel和WebPack来设置现代JavaScript项目，以确保ES6代码在更广泛的Web浏览器中兼容。> <p>首先使用package.json文件创建项目结构，然后分别将代码整理到SRC和公共目录中以供源和传输JavaScript。 >将babel安装到将ES6转换为ES5，针对特定的浏览器版本，并使用NPM脚本自动化此过程。<h2 > >实现ES6模块以有效地管理和模块化JavaScript代码，尽管与IE11这样的较旧浏览器的兼容性仍然有限。 <ul >>将WebPack集成以将JavaScript模块捆绑到单个或多个文件中，减少服务器请求并优化加载时间。<li> 通过WebPack的观看和Dev-Server功能增强开发工作流程，以自动重建和刷新代码更改时浏览器。 <li>>先决条件 为了跟随，您需要同时安装node.js和NPM（它们包装在一起）。我建议使用NVM等版本管理器来管理您的节点安装（以下是），如果您希望获得一些帮助，请查看Sitepoint的初学者NPM Tutorial。<h2 >>设置 <p>>在计算机上某个地方创建一个根文件夹，然后从终端/命令行中导航到其中。这将是您的<root>文件夹。> <p>创建一个包装。 <pre ><span >npm init -y <p>注意：-y标志使用默认设置创建文件，这意味着您无需从命令行中完成任何常用的详细信息。如果您愿意，可以在您的代码编辑器中更改它们。<em>> 在您的<根>文件夹中，制作目录SRC，SRC/JS和公共。 SRC/JS文件夹将是我们将未经处理的源代码放置的位置，公共文件夹将是转移代码最终的位置。 <p>>用babel 转移 <h2 >为了使自己前进，我们将安装babel-cli，它提供了将ES6转移到ES5和Babel-Preset-env的能力，这使我们能够用转移的代码来定位特定的浏览器版本。 > <p>您现在应该在包装中查看以下内容。 <pre ><span >npm install babel-cli babel-preset-env --save-dev >当我们在package.json文件中时，让我们更改脚本部分以读取这样的脚本：<p>> <pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} >这使我们能够通过脚本致电Babel，而不是每次直接从终端中。如果您想了解有关NPM脚本及其可以做什么的更多信息，请查看此SitePoint教程。<p> 最后，在我们可以测试Babel是否正在做事之前，我们需要创建一个.babelrc配置文件。这是我们的babel-preset-env软件包将引用其变形参数的内容。> <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, >在您的<Root>目录中创建一个新文件。 <p> >这将使每个浏览器的最后两个版本以及V7或更高版本的Safari设置为babel transpile。其他选项可根据您需要支持的浏览器提供。<p>> >保存了，我们现在可以使用使用ES6的示例JavaScript文件来测试内容。出于本文的目的，我修改了LeftPad的副本以在许多地方使用ES6语法：模板文字，箭头函数，const和Let。 <p> >将其保存为src/js/leftpad.js，从您的终端运行以下内容：<pre ><span >{ <span >"presets": [ <span >[ <span >"env", <span >{ <span >"targets": { <span >"browsers": ["last 2 versions", "safari >= 7"] <span >} <span >} <span >] <span >] <span >} > <p> 如果一切都是预期的，则在您的公共文件夹中，您现在应该找到一个名为js/leftpad.js的新文件。如果您打开它，您会发现它不再包含任何ES6语法，并且看起来像这样：<p>> <pre ><span >"use strict"; <span >function leftPad(str<span >, len, ch) { <span >const cache = [ <span >"", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" " <span >]; str <span >= str + ""; len <span >= len - str.length; <span >if (len <= 0) return str; <span >if (!ch && ch !== 0) ch = " "; ch <span >= ch + ""; <span >if (ch === " " && len < 10) <span >return () => { cache<span >[len] + str; <span >}; <span >let pad = ""; <span >while (true) { <span >if (len & 1) pad += ch; len <span >>>= 1; <span >if (len) ch += ch; <span >else break; <span >} <span >return <span >`<span >${pad}<span >${str}`; <span >} >使用ES6模块组织代码<p> > ES6模块是一个JavaScript文件，其中包含您希望向另一个JavaScript文件提供的函数，对象或原始值。您从一个导出，然后导入另一个。任何严重的现代JavaScript项目都应考虑使用模块。它们使您可以将代码分解为独立的单元，从而使事情更容易维护；它们可以帮助您避免命名空间污染；它们有助于使您的代码更加便携式和可重复使用。<pre ><span >npm run build ><p>>虽然大多数ES6语法在现代浏览器中广泛使用，但模块的情况尚不如此。在撰写本文时，它们可在Chrome，Safari（包括最新的iOS版本）和Edge中使用；它们隐藏在Firefox和Opera中的旗帜后面。 IE11也不可用（也可能永远不会），也不是大多数移动设备。> <p>在下一部分中，我们将研究如何将模块集成到我们的构建设置中。 <h3 >>导出 <p>>导出关键字使我们能够使我们的ES6模块可用于其他文件，并且为我们提供了两个选择 - 命名和默认值。使用命名的导出，您可以每个模块都有多个导出，并且默认导出您只有一个模块。在您需要导出几个值的情况下，命名的出口特别有用。例如，您可能有一个包含许多实用程序功能的模块，需要在您的应用程序中的各个地方提供。 >因此，让我们将左PAD文件转换为一个模块，然后我们可以在第二个文件中需要。<ancy>> <p> >命名export<h4 > 要创建一个命名的导出，将以下内容添加到左派文件的底部：<ancy>> <p> >我们还可以删除“使用严格”；从文件顶部声明，因为模块在严格的模式下运行。<pre ><span >npm init -y <p>> defult Export <h4 >>由于在左板文件中只有一个函数，因此它实际上可能是使用导出默认值的好候选者： <p> 再次，您可以删除“使用严格”；从文件顶部声明。 <pre ><span >npm install babel-cli babel-preset-env --save-dev >导入<p> >要使用导出的模块，我们现在需要将它们导入文件（模块），我们希望在。 <h3 >>对于导出默认选项，可以根据您希望选择的任何名称导入导出的模块。例如，可以像这样导入左板模块：> <p> 或可以将其导入另一个名称，例如：<p>> 在功能上，两者都可以正常工作，但是使用与导出的同一名称或使导入可以理解的东西显然很有意义 - 也许在此的地方，导出的名称将与另一个已经已经已经存在的变量名称发生冲突存在于接收模块中。<pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} <p>>对于命名的导出选项，我们必须使用与下导出相同的名称导入模块。对于我们的示例模块，我们以与导出默认语法相似的方式导入它，但是在这种情况下，我们必须用卷曲括号包装导入的名称：<ancy>> <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, 括号是必须带有指定出口的牙套，如果不使用它们，它将失败。 <p>>可以在需要时更改导入的命名导出的名称，并且要这样做，我们需要使用import [module]作为[路径]语法对我们的语法进行一些修改。与导出一样，有多种方法可以做到这一点，所有这些都在MDN导入页面上进行了详细介绍。。<pre ><span >npm init -y <p>>再次，名称更改有点荒谬，但它说明了它们可以更改为任何事物的观点。您应该始终保持良好的命名实践，除非您当然要编写准备基于水果的食谱的例行程序。 <h3 >消耗导出的模块 <p>>使用导出的左PAD模块，我在SRC/JS文件夹中创建了以下index.js文件。在这里，我循环浏览一系列序列号，并将它们带有零以将它们制成八个字符的字符串。稍后，我们将使用此信息，然后将其发布到HTML页面上的有序列表元素中。请注意，此示例使用默认导出语法：<ancy> <pre ><span >npm install babel-cli babel-preset-env --save-dev 就像我们之前所做的那样，从<根>目录运行构建脚本：<ancy>> <p> babel现在将在public/js目录中创建一个index.js文件。与我们的LeftPad.js文件一样，您应该看到Babel替换了所有ES6语法，仅留下ES5语法。您可能还会注意到它已将ES6模块语法转换为基于节点的模块。Exports，这意味着我们可以从命令行运行它：<pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} > <p> >您的终端现在应该记录一个带有零以上的字符串，以使它们全部八个字符长。完成此操作，是时候看看WebPack了。<pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, > <p>介绍Webpack并将其与Babel 集成 如前所述，ES6模块允许JavaScript开发人员将代码分解为可管理的块，但其结果是必须将这些块提供到请求浏览器，并可能添加数十个其他HTTP请求回到服务器 - 我们真正应该避免的事情。这是webpack进来的地方。<h2 > <ancipal是一个模块捆绑包。它的主要目的是通过跟踪所有依赖项来处理您的应用程序，然后将它们全部包装成一个或多个可以在浏览器中运行的捆绑包。但是，根据其配置方式，它可能远不止于此。> <p> WebPack配置围绕四个关键组件：<ancy>> <p>入口点 <p>输出位置 <ul>加载器<li> 插件<li> <li>条目：这是您应用程序的起点，从webpack可以识别其依赖项的位置。<ancy>> >输出：这指定您希望保存处理的捆绑包。<ancy>> <li>加载器：这些是将一件事转换为输入并生成其他内容作为输出的一种方式。它们可用于扩展WebPack的功能以处理不仅仅是JavaScript文件，因此也将其转换为有效的模块。> >插件：这些用于将WebPack的功能扩展到捆绑之外的其他任务中 - 例如缩小，伸长和优化。 <p>要安装WebPack，从您的<Root>目录中运行以下内容：<ancy>><pre ><span >npm init -y <p>>这将在本地安装到该项目，还可以通过添加WebPack-CLI从命令行运行WebPack。现在，您应该查看package.json文件中列出的webpack。当您在该文件中时，请按照以下方式修改脚本部分，以便它知道直接使用webpack而不是直接使用babel：> <pre ><span >npm install babel-cli babel-preset-env --save-dev 如您所见，此脚本在WebPack.config.js文件上调用，因此，让我们在带有以下内容的目录中创建该脚本：<p>> <pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} 这或多或少是WebPack所需的最简单的配置文件。您可以看到它使用<p>entry<em>和 output<em>的部分（它可以单独使用这些），但还包含一种模式：“开发”设置。 <antew> WebPack可以选择使用“开发”或“生产”模式。设置模式：“开发”优化了构建速度和调试的优化，而模式：“生产”优化了运行时和输出文件大小的执行速度。在Tobias Koppers的文章“ WebPack 4：模式和优化”中，有很好的解释，如果您希望阅读更多有关如何在默认设置之外配置它们的信息。<ante>> 接下来，从public/js文件夹中删除所有文件。然后重新运行：<p> <p>>您会看到它现在包含一个./public/bundle.js文件。不过，打开新文件，以及我们开始的两个文件看起来相当不同。这是包含index.js代码的文件部分。即使我们的原始作品已经进行了重大修改，但您仍然可以挑选出其变量名称：<ancy>> <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, 如果您从<Root>文件夹中运行节点public/js/bundle.js，您会看到您获得与以前相同的结果。<p>> transpliting <pre ><span >{ <span >"presets": [ <span >[ <span >"env", <span >{ <span >"targets": { <span >"browsers": ["last 2 versions", "safari >= 7"] <span >} <span >} <span >] <span >] <span >} <p>>如前所述，加载器<h3 >>允许我们将一件事转换为其他东西。在这种情况下，我们希望ES6转换为ES5。为此，我们还需要几个包： <p> <em>要使用它们，Webpack.config.js需要一个模块部分，在> output 节之后添加到它，就像： <pre ><span >"use strict"; <span >function leftPad(str<span >, len, ch) { <span >const cache = [ <span >"", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" " <span >]; str <span >= str + ""; len <span >= len - str.length; <span >if (len <= 0) return str; <span >if (!ch && ch !== 0) ch = " "; ch <span >= ch + ""; <span >if (ch === " " && len < 10) <span >return () => { cache<span >[len] + str; <span >}; <span >let pad = ""; <span >while (true) { <span >if (len & 1) pad += ch; len <span >>>= 1; <span >if (len) ch += ch; <span >else break; <span >} <span >return <span >`<span >${pad}<span >${str}`; <span >} <p>>这是使用正则语句来识别要与Babel-Loader一起转移的JavaScript文件，同时将Node_Modules文件夹中的任何内容都排除在外。最后，告诉Babel-Loader使用前面安装的Babel-Preset-env软件包，以建立.babelrc文件中设置的变式参数。 <em>完成此操作，您可以重新运行以下内容：> <pre ><span >npm run build 然后检查新的public/js/bundle.js，您会看到ES6语法的所有痕迹都消失了，但它仍然产生与以前相同的输出。 <p>将其带到浏览器> <p>>建立了功能正常的Webpack和Babel设置，是时候将我们所做的工作带到浏览器了。需要一个小的html文件，应在下面的<root>文件夹中创建这：<ancy>><pre ><span >npm init -y <p>>没有什么复杂的。要注意的要点是<ol> 元素，数字的数组将在其中进行，以及<script> </script> 元素在关闭

以上是使用Babel和WebPack设置ES6项目的详细内容。更多信息请关注PHP中文网其他相关文章！