mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-23 21:20:42 +08:00
提交翻译
This commit is contained in:
ywxgod
parent
f03087356c
commit
0d473f4ec6
@ -7,7 +7,7 @@
|
||||
[#]: via: (https://opensource.com/article/20/11/javascript-build-tools)
|
||||
[#]: author: (Shedrack Akintayo https://opensource.com/users/shedrack-akintayo)
|
||||
|
||||
Javascript构建工具的6个预测
|
||||
对Javascript构建工具的6个预测
|
||||
======
|
||||
Javascript前端工具的生态系统充满着变数和竞争，且只有最好的工具才会存活下来。
|
||||
![Magnifying glass on code][1]
|
||||
@ -22,7 +22,7 @@ Javascript前端工具的生态系统充满着变数和竞争，且只有最好
|
||||
|
||||
#### 1\. 转译
|
||||
|
||||
通过转译，开发者可以使用到语言最新，最热门的更新和扩展，以及浏览器兼容性的维护等。 这是使用[Babel][3]的一个例子:
|
||||
通过转译，开发者可以使用到语言最新，最热门的更新和扩展，以及浏览器兼容性的处理维护等。 下面是使用[Babel][3]的一个例子:
|
||||
|
||||
|
||||
```
|
||||
@ -36,7 +36,7 @@ const double = [1, 2, 3].map(function(num) {
|
||||
|
||||
#### 2\. 分包
|
||||
|
||||
分包是处理所有"import"与"require"语句的过程; 找到相匹配的JS代码片段，包和库; 将它们添加到适当的域中; 然后将它们打包到一个JS文件中. 常用的分包器包括 Browserify, Webpack, and Parcel.
|
||||
分包是处理所有"import"与"require"语句的过程; 找到相匹配的JS代码片段，包和库; 将它们添加到适当的域中; 然后将它们打包到一个JS文件中。常用的分包器包括Browserify, Webpack与Parcel。
|
||||
|
||||
#### 3\. 压缩
|
||||
|
||||
@ -56,7 +56,7 @@ const double = [1, 2, 3].map(function(num) {
|
||||
|
||||
#### 4\. 打包
|
||||
|
||||
完成上面的所有步骤之后, 我们需要将这些具有兼容性，且经过分包，压缩/混淆过的文件放置到某个地方。打包正是这样一个过程，它将上述步骤所产生的结果放置到开发者指定的某个位置上。这通常是通过分包器完成的.
|
||||
完成上面的所有步骤之后, 我们需要将这些具有兼容性，且经过分包，压缩/混淆过的文件放置到某个地方。打包正是这样一个过程，它将上述步骤所产生的结果放置到开发者指定的某个位置上，这通常是通过打包器完成的。
|
||||
|
||||
### 前端构建工具
|
||||
|
||||
@ -73,41 +73,41 @@ Javascript生态系统中有各种各样的构建工具可以使用，包括下
|
||||
|
||||
#### Grunt and Bower
|
||||
|
||||
[Grunt][4] 作为一个命令行工具被引入，它仅提供一个脚本来指定和配置相关构建任务。[Bower][5] 作为包管理器，提供一种客户端包的管理方法而紧追其后。这两者，再加上NPM，它们经常被使用在一起，它们似乎可以满足大多数的自动化需求。Grunt的问题在于它无法提供给开发者配置更复杂任务的自由，而Bower使开发者管理的程序包是平常的两倍，因为它将前端包后后台包分开了 (例如，Bower components vs. Node modules)。
|
||||
[Grunt][4] 作为一个命令行工具被引入，它仅提供一个脚本来指定和配置相关构建任务。[Bower][5] 作为包管理器，提供了一种客户端包的管理方法而紧追其后。这两者，再加上NPM，它们经常被使用在一起，它们看上去似乎可以满足大多数的自动化需求，但Grunt的问题在于它无法提供给开发者配置更复杂任务的自由，而Bower使开发者管理的程序包是平常的两倍，因为它将前端包包、后台包分开了 (例如，Bower components vs. Node modules)。
|
||||
|
||||
**Grunt与Bower的未来:** Grunt与Bower即将退出javascript工具生态，但是还有一些替代品。
|
||||
|
||||
#### Gulp and Browserify
|
||||
|
||||
[Gulp][6]是在Grunt发布后的一年半才发布的。然而Gulp让大家感觉很自然、舒服。用javascript来写构建脚本与用JSON来写相比更自由。你可以Gulp的构建脚本中编写函数，即时创建变量，在任何地方使用条件语句--但就这些，并不能说让我们的脚本变得特别自然和强大，只能说有这个可能。[Browserify][7]和Gulp可以配合使用。Browserify允许NPM包(用于后端Node服务器)被直接带入到前端，这直接让Bower废了。而这种用一个包管理器来处理前端后后台包的方式让人感到更好和更自然。
|
||||
[Gulp][6]是在Grunt发布后的一年半才发布的。但Gulp却让大家感到很自然、舒服。用javascript来写构建脚本与用JSON来写相比更自由。你可以在Gulp的构建脚本中编写函数，即时创建变量，在任何地方使用条件语句--但就这些，并不能说让我们的感觉变得特别自然和舒适，只能说这只是其中的，一个可能的原因。[Browserify][7]和Gulp可以配合使用，Browserify允许NPM包(用于后端Node服务器)被直接带入到前端，就这一点已经直接让Bower废了。而正是这种用一个包管理器来处理前后台包的方式让人感到更自然和更好。
|
||||
|
||||
**Gulp的未来:** Gulp可能会被改进，以匹配当前流行的构建工具，但这完全取决于创作者的意愿。Gulp还在使用中，只是没有以前那么流行了。
|
||||
**Gulp的未来:** Gulp可能会被改进，以便匹配当前流行的构建工具，但这完全取决于创作者的意愿。Gulp还在使用中，只是不再有以前那么流行了。
|
||||
|
||||
#### Webpack and NPM/Yarn scripts
|
||||
|
||||
[Webpack][8]是现代前端开发工具中最热门的宠儿。Webpack是一个开源的javascript模块打包器. 它主要是为处理javascript而创作的，但如果包含相应的loaders，它也可以转换HTML、CSS和图片等前端资源。通过Webpack，你也可以像Gulp一样编写构建脚本，并通过[NPM/Yarn][9]来执行这些脚本.
|
||||
[Webpack][8]是现代前端开发工具中最热门的宠儿，它是一个开源的javascript模块打包器。Webpack主要是为处理javascript而创作的，但它如果包含相应的loaders，它也可以转换HTML、CSS和图片等前端资源。通过Webpack，你也可以像Gulp一样编写构建脚本，并通过[NPM/Yarn][9]来执行这些脚本。
|
||||
|
||||
**Webpack的未来:** Webpack是目前Javascript工具生态系统中最热门的工具，最近几乎所有的JS库都在使用React和Webpack. Webpack目前处于第四个版本，不会很快消失。（译者注：webpack目前已经发布了第五个版本了，且还在火热更新中）
|
||||
**Webpack的未来:** Webpack是目前Javascript工具生态系统中最热门的工具，最近几乎所有的JS库都在使用React和Webpack。Webpack目前处于第四个版本，不会很快消失。（译者注：webpack目前已经发布了第五个版本了，且还在火热更新中）
|
||||
|
||||
#### Parcel
|
||||
|
||||
[Parcel][10]是一个web应用打包器，于2018年推出，因其开发者不同的体验而与众不同。Parcel能利用多核功能提供极快的性能，且还零配置。Parcel还是一个新星，其采用率并不高，特别是对于一些大型应用。与Webpack相比，开发人员更喜欢使用Webpack，因为Webpack有更广泛的支持和可定制性。
|
||||
[Parcel][10]是一个web应用打包器，于2018年推出，因其有着不同的开发者体验而与众不同。Parcel能利用处理器多核功能提供极快的打包性能，且还零配置。但Parcel还是一个新星，对于一些大型应用，其采用率并不高。与Webpack相比，开发人员更喜欢使用Webpack，因为Webpack有更广泛的支持和可定制性。
|
||||
|
||||
**The future of Parcel:** Parcel is very easy to use, it is faster than Webpack if you measure bundle and build time, and it also offers a better developer experience. The reason Parcel hasn't been adopted much might be because it's still relatively new. Parcel has a very bright future in the frontend build tools ecosystem, and it will be around for a while.
|
||||
**Parcel的未来:** Parcel非常容易使用，如果你统计打包和构建时间，它会比Webpack更快，而且它还提供了更好的开发者体验。Parcel没有被大量采用的原因可能是它仍然比较新。在前端构建工具的生态系统中，Parcel的前景会非常光明，它将会存在一段时间。
|
||||
|
||||
#### Rollup
|
||||
|
||||
[Rollup][11] is a module bundler for JavaScript that compiles small pieces of code into something larger and more complex, such as a library or an application. It is advisable to use Rollup when building a library with minimal third-party imports.
|
||||
[Rollup][11]是Javascript的一个模块分包器，它可将一小段代码编译为更大更复杂的库或应用。Rollup一般建议用来构建JS库，特别是那种导入和依赖的第三方库较少的那种JS库。
|
||||
|
||||
**The future of Rollup:** Rollup is super-cool and is being adopted rapidly. It has great features and will be part of the frontend tooling ecosystem for a long time.
|
||||
**Rollup的未来:** Rollup很酷，且正在被迅速采用。它有很多强大的功能，将在很长一段时间内作为前端工具生态系统的一个组成部分而存在。
|
||||
|
||||
### Learn more
|
||||
### 了解更多
|
||||
|
||||
The JavaScript tooling ecosystem is dynamic and competitive, and only the best tools survive. In the future, we will see tools that require less (or no) configuration, better customizability, more extensibility, and higher speed.
|
||||
Javascript前端工具的生态系统充满着变数和竞争，且只有最好的工具才能存活下来。 在不久的将来，我们的构建工具将具有更少(或没有)的配置，更方便的定制化，更好的扩展性的和更好的构建速度。
|
||||
|
||||
The tools you use for an application's frontend are a personal call that you need to make based on your project's requirements. Choose what works best for you, and most of the time, there are tradeoffs.
|
||||
该用什么样的构建工具用于你的前端项目，你需要根据具体的项目需求来做出决定。至于选择什么样的工具，才是最合适自己的，大多数时候，需要我们自己作出取舍。
|
||||
|
||||
For more information, see:
|
||||
更多信息, 请看:
|
||||
|
||||
* [JavaScript tooling: The evolution and future of JS/frontend build tools][12]
|
||||
* [Tools and modern workflow for frontend developers][13]
|
||||
@ -118,7 +118,7 @@ For more information, see:
|
||||
|
||||
* * *
|
||||
|
||||
_This article originally appeared on [Shedrack Akintayo's blog][16] and is republished with his permission._
|
||||
_这篇文章最初发表在[Shedrack Akintayo的博客][16]上，经他许可后重新发表在这里._
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
@ -126,7 +126,7 @@ via: https://opensource.com/article/20/11/javascript-build-tools
|
||||
|
||||
作者：[Shedrack Akintayo][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
译者：[ywxgod](https://github.com/ywxgod)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
Loading…
Reference in New Issue
Block a user