搜索

首页 >web前端 >js教程 >理解JavaScript模块：捆绑和移动

理解JavaScript模块：捆绑和移动

Christopher Nolan
Christopher Nolan原创
2025-02-18 08:35:10975浏览

Understanding JavaScript Modules: Bundling & Transpiling <script> </script> $（function（）{...}）;

>您自己的应用程序代码通常在像全球应用程序之下命名，以防止污染全局范围。没有这个 

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>
未来

以通用模块格式（ES6模块）导出对象。

我们将模块导入本地范围并使用它。
<span>export default function $() { ... }
</span>
> 

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>
无需全球吗？
    >
  • >源顺序独立
  • >访问NPM
  • 无需命名您自己的应用程序代码
  • >随时按需要动态加载模块
    • 现在的

>真的很复杂。 首先，使用的是多种模块格式：

commonjs

> amd
  • umd
  • > ES6模块
    • 捆绑资产的工具有多种形状和尺寸：>
    • browserify

jspm

    > webpack
    • 汇总
    • 早午餐 / brocolli
    • 链轮
    • >用gulp / grunt
  • 建立自己的构建
  • 然后有您可能要使用的转介剂：
    • >
  • ES6
    • 的 babel
> coffeescript

打字稿
    • 此外，还有各种库可以允许模块的动态加载：>
    • require.js
    • > system.js

>这些是当前正在使用的流行工具的缩短列表 - 这是针对初学者和专家的雷区。 移动的成本还突出了您可以混合和匹配许多此类工具并获得不同结果的成本。
    >
  • 让我们在2016年合并工具
  • 前端开发人员已经使用了构建工具很长时间了，但是直到最近几年，我们才看到构建步骤成为常态。 Sass和Coffeescript等工具有助于预处理主流，但是ES6周围的动力现在使每个人都加入了。 JavaScript社区在2015年取得了重大改进，但我们需要在2016年合并工具。
    • 我同意。
在过去的几年中，

Gulp和Grunt一直很受欢迎，这些工具使您能够编写一系列转换以使您的资产通过。 尽管很多人选择直接通过NPM使用这些工具，但它们已经习惯了，但仍然很受欢迎 - 请参阅为什么我将gulp and Grunt用于NPM脚本，并指南将NPM用作构建工具。

>

>就我个人而言，我不再关心建造资产管道，我要寻找的是最小的配置工具，它允许我根据需要使用现代工具：诸如Sass，Autoprefixer，Babel和Coffeescript之类的东西，适当的模块系统和加载程序不必担心实施，配置和持续的维护。 从本质上讲，每个开发人员在过去几年中一直在投入时间来创建资产管道，这是大量的重新发明，并且有很多浪费的时间。

>

>社区分为诸如浏览，WebPack，JSPM，链轮和Gulp之类的工具。 这不是一个真正的问题，这只是让每个试图了解一条明确前进道路的人都感到困惑。

清除起点

我们可以同意以下几件事：

>

ES2015模块是JavaScript的一种真实的未来模块格式。>
    babel是当今首选的ES2015编译器。
  • >
    • >本机加载机距离浏览器中的可用性还有一段时间，Telerik对JavaScript的未来报告表明，鉴于模块加载hurdle，完整的ES2015支持可能需要两年多的时间。
  • >
    • 如果您现在想使用模块，那很可能在某个时候涉及commonj。
    • >让我们看一下最小配置设置的外观，使用browserify，webpack和jspm，这些是当今最重要的JavaScript捆绑包。
  • 一个新项目
    • 您喜欢的文本编辑器中的更新index.html

>我们还需要一台服务器来运行代码 - 例如，Live-Server是具有实时重新加载功能的很棒的Little Zero-Config HTTP服务器。使用NPM install -G实时服务器全球安装它，然后从项目root到“启动”实时服务器。

browserify 
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

浏览器让您在浏览器中需要（'模块'），通过捆绑所有依赖项。

> 
<span>export default function $() { ... }
</span>
打开src/lib.js并添加我们的第一个模块。

>

>打开src/entry.js，我们将需要我们的模块并使用它。>

>更新package.json

中的脚本部分

>使用NPM运行浏览
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>
运行此脚本 浏览将在项目root中创建bundle.js，您应该在控制台上看到最大的4输出。 要了解有关浏览器正在做什么以及如何创建该捆绑的更多信息，我建议您观看egghead.io

> browserify的介绍

恭喜！我们现在在浏览器中有模块！ ？
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>

>浏览的另一个关键好处是，它不仅可以使您访问您的作者模块，还可以访问NPM模块，让我们安装Lodash以查看。> 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
>编辑src/lib.js

>编辑src/entry.js并调用我们的新Addfive 

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

>使用NPM运行浏览器再次创建捆绑包，在浏览器中，您应该看到一个4和一个7，这表明我们已经成功导入并使用了lodash的总和函数。

如果您遵循这一范围，您现在知道您今天开始使用浏览器中使用模块所需的一切，这带来了我们一开始就概述的许多好处。

>

    无需全球吗？
  • >
    • >源顺序独立
    • >访问NPM
    • 无需命名自己的应用程序代码
>我们将在运行时查看模块的动态加载。

>

> webpack

>让我们添加一个新脚本。

>使用NPM运行webpack

运行它 尝试运行NPM运行浏览和NPM运行webpack，并检查编译捆绑包中的差异。 了解这些工具在内部的工作原理并不重要，要注意的重要的是，尽管实现不同，但它们基本上正在执行相同的任务，将相同的代码与CommonJS模块编译为标准浏览器友好的JavaScript。 每个模块都放入bundle.js中的功能中，并分配了一个ID，以便可以根据需要加载它。

<span>export default function $() { ... }
</span>

> WebPack比这要多得多！ 它确实是模块捆绑机的瑞士军刀。 WebPack还提供了开箱即用的出色工具，例如热模块替换，它将在更改时自动重新加载浏览器中的单个模块 - 类似于LiverEload，但没有页面刷新。

>也有越来越多的不同资产类型的装载机列表，即使是带有CSS-Loader和样式加载程序的CSS，也可以将CSS编译到JavaScript捆绑包中并在运行时注入页面。 这超出了本文的范围，但可以从WebPack开始时可以找到更多。

>。

> JavaScript transpilers

这是当今使用的三个最受欢迎的转侧，您也可能想使用另一种，从

的语言中使用另一种。 在查看如何将它们与模块捆绑器一起使用之前，让我们看看如何直接使用工具。 > coffeescript

>编辑咖啡lib.coffee

注意：CoffeeScript使用模块的commonjs语法

>添加一个脚本。

>使用NPM运行咖啡

运行它

打字稿
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

编辑ts-lib.ts

注意：TypeScript具有自己的模块的语法，看起来像ES2015模块语法和COMPORJS的混合。
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>

>将脚本添加到package.json以运行TSC可执行

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

>使用NPM运行TSC

运行它

>编译器将抱怨无法找到Lodash，因为它需要类型定义才能知道如何使用不是打字稿文件的外部模块。 您可以使用以下方式获取定义文件：

<span>export default function $() { ... }
</span>

babel

编辑ES6-lib.js 

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

注意：Babel了解可爱的新ES2015模块语法。

babel需要一个配置文件，以指定要使用

>的预设 

<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>
>添加一个脚本。

>使用npm运行babel 
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
运行它

> /dist中的文件现在包含COMPONJS模块格式的ES5代码，该格式将与我们之前使用的那样，将与浏览或WebPack完美配合。 您可以先用concomjs将ES5转移到ES5，然后再捆绑，也可以使用其他软件包在一个步骤中进行。

>

>浏览中有插件咖啡，tssify和babelify to thranspile and Bundle。

>

> WebPack有装载机咖啡加载程序，TS-Loader和Babel-Loader需要不同语言的模块。

jspm

JSPM是SystemJS Universal Module Loader的软件包管理器，该软件模块加载器构建在动态ES6模块加载器

上的顶部 JSPM采用不同的方法，并从模块加载程序系统开始。 System.js是一个项目，将遵循加载器规格开发的项目。>

>安装并初始化JSPM项目

接受所有默认值并确保将Babel用作转板器，该默认值将配置System.js在运行到ES6样式模块时使用Babel。

>“更新索引”

>在浏览器中，您会看到一些请求和lodash的404，这是因为JSPM默认情况下从JSPM_Packages目录加载软件包。 
<span>var double = function(number) {
</span>  <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span>  <span>double: double
</span><span>}
</span>
>运行JSPM安装lodash以在该目录中安装lodash，您应该在控制台，A 4和7中看到预期的输出，这是发生的事情：

>

我们的entry.js文件正在动态加载system.import（'src/entry.js'）;。

<span>var lib = require('./lib.js');
</span><span>console.log(lib.double(2));
</span>
> system.js加载条目。

system.js加载lib.js，发现它需要lodash/sum并获取它。

>

> system.js还知道如何直接与ES6合作，更新输入。
  • >您也可以尝试通过一次删除这些行，一次删除我们的CoffeeScript或打字条模块的ES5编译版本。另一个选项是使用system.js插件来传输代码，而不是需要预编译ES5代码。
  • >将最终脚本添加到包装。
  • >使用NPM运行JSPM
    • 运行它

    >最终取消注释index.html中的bundle.js的脚本标签，浏览器应加载一个可以生产的捆绑包，而无需任何额外的http请求。 

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>
重新访问webpack

>我们的WebPack示例是使用默认选项的最简单示例，它将带有commonjs模块的entry.js汇编为一个捆绑包。 使用webpack做更多的花哨事件时，您需要为所有加载程序配置创建一个自定义配置文件。

>创建wearpack.config.js在项目的根部

> 

<span>export default function $() { ... }
</span>
>“更新index.html”仅加载捆绑的文件。>

>安装加载程序，用于使用Babel，CoffeeScript和Typescript 
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>
进行转换

>全球安装WebPack，并且没有参数以从我们的配置文件创建捆绑包。
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>
。

>现在WebPack知道将这些加载程序用于这些文件扩展名，我们可以随意使用Entry.js中的ES6，CoffeeScript或Typescript。 
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

> WebPack比我在这里介绍的要多得多，但是这些简单的设置是一个很棒的起点。

>再次返回
<span>var double = function(number) {
</span>  <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span>  <span>double: double
</span><span>}
</span>
>

>因此，我们结束了对模块的探索，它们确实解决了很多问题，并且可以真正降低应用程序的复杂性 - 如果工具不会阻碍我们的方式。 如果您还没有使用模块，那么现在是时候了。无需花费不必要的时间来构建资产管道，而是使用只有工作™的简单工具。 webpack是当前的Juggernaut，您将能够将其配置为几乎所有操作。 JSPM是满足您所有捆绑需求的绝佳工具，并且可以使用各种格式，并且具有良好的开发人员体验。浏览仍然是一个可靠的选择，是现代模块捆绑器的祖父 - 它的生态系统已经发展起来，包括Webpack的一些备受喜爱的功能（例如捆绑拆分和热重新装载）。 最后，system.js非常适合当您需要在运行时加载额外的模块时。

>

>您不想在一个项目中使用上述所有工具，但重要的是要了解这三个流行的选项，以及在需要时如何使用换手器。 如果您只想使用模块，则使用默认选项浏览，JSPM或WebPack将完成工作。

>保持工具简单和配置灯。快乐捆绑。

经常询问有关JavaScript模块，捆绑和transphitling

的问题（常见问题解答）

> JavaScript模块，捆绑和翻转的区别是什么？

JavaScript模块是可以在其他脚本中导入和使用的各个代码单位。它们有助于组织代码，使其更可维护和重复使用。另一方面，捆绑是将多个JavaScript文件组合到单个文件中的过程。这样做是为了减少HTTP请求的数量，这可以显着提高Web应用程序的性能。转移是将源代码从一种语言或版本转换为另一种语言的过程。在JavaScript的背景下，它通常是指将较新的JavaScript语法转换为较旧的版本，以与较旧的浏览器兼容。 为什么在JavaScript中捆绑很重要？ 。首先，它通过将多个JavaScript文件组合为一个来减少HTTP请求的数量。这可以显着提高Web应用程序的性能。其次，捆绑使您可以在不支持它们的浏览器中使用模块。最后，捆绑还可以包括一个称为Minification的过程，该过程减少了JavaScript文件的大小，进一步提高了性能。

>

> JavaScript Transpiler的作用是什么？ Babel，在确保在不同浏览器中兼容JavaScript代码方面起着至关重要的作用。它通过将较新的JavaScript语法转换为大多数浏览器支持的旧版本来实现此目的。这允许开发人员使用JavaScript的最新功能而不必担心浏览器兼容性问题。

> javaScript模块如何工作？

> javaScript模块是一个独立的代码，它导出了特定变量或特定变量的代码其他模块可以使用的功能。导入模块时，其导出变量或功能将用于导入脚本。这允许代码重复使用和更好的代码组织。

>一些流行的JavaScript捆绑工具是哪些？

>一些流行的JavaScript捆绑工具包括WebPack，lollup和Parcel。这些工具不仅包装JavaScript文件，还提供诸如代码分配，懒惰加载以及处理其他资产（例如CSS和Images）等功能。

>

如何在编写现代JavaScript？允许开发人员使用最新功能和语法编写现代JavaScript，而不必担心兼容性问题。转板器将现代JavaScript转换为与大多数浏览器兼容的版本。这样可以确保JavaScript代码始终在不同的浏览器上运行。

>

>我可以使用JavaScript模块而不捆绑吗？但是，由于多个HTTP请求，这可能会导致性能问题。另外，并非所有浏览器都支持JavaScript模块，因此捆绑可以帮助确保兼容性。

>

>捆绑和缩合之间有什么区别？

我如何为项目选择正确的捆绑工具？

选择捆绑工具的选择取决于项目的要求。要考虑的因素包括项目的规模，所需的功能（例如代码分配或处理其他资产）以及您的个人喜好。尝试一些不同的工具是一个好主意，看看哪种工具最适合您的项目。

> JavaScript模块，捆绑和移动的未来是什么？模块，捆绑和移动看起来很有希望。随着JavaScript的持续演变，我们可以期望更多的高级功能和语法，这将需要转移以与较旧的浏览器兼容。出于绩效原因，捆绑将继续很重要。至于模块，它们正在成为JavaScript的标准部分，我们可以期望在浏览器中为它们提供更好的支持。

以上是理解JavaScript模块：捆绑和移动的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript typescript json css gulp html es6 npm sass coffeescript webpack Static if for while format include require try Directory continue using Namespace finally JS console number function default this idea http https everything Access Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Immutable Data and Functional JavaScript with Mori下一篇：A-Frame: The Easiest Way to Bring VR to the Web Today

相关文章

查看更多