如果你正在用 React.js 或 React Native 来开发用户界面的话，试试这些框架。

React.js 和 React Native 都是用来开发用户界面（UI）的很受欢迎的开源平台。在 StackOverflow 2019 年度开发者调查里，两个框架的可取性和使用情况都排名靠前。React.js 是 Facebook 在 2011 年开发的一个 JavaScript 库，来实现跨平台，动态以及高性能的 UI 设计需求；而 React Native 则是 Facebook 在 2015 年发布的框架，目的是使用 JavaScript 构建原生应用。

下面介绍 13 个最好的 React JavaScript 框架，都是开源项目。前 11 个（和 React 一样）都使用 MIT 许可证授权，后面两个使用 Apache 2.0 许可证。

1、Create React App

这个 Facebook 开发的命令行工具是 React Native 项目一定要用的。因为 Create React App 使用很简单，还可以避免你自己手动设定和配置应用，因此能节省大量的时间和精力。仅仅使用给一个简单的命令，就可以为你准备好创建 React 原生项目所需的一切。你可以用它来创建分类和文件，而且该框架还自带了工具用来构建，测试和启动应用。

# 安装软件包
$ npm install -g create-react-native-web-app
 
# 运行 create-react-native-web-app <项目目录>
$ create-react-native-web-app myApp
 
# 切换到创建的 <项目目录>
$ cd myApp
 
# 运行 Web/Ios/Android 调试
# Web
$ npm run web
 
# IOS（模拟）
$ npm run ios
 
# Android（实际连接的设备）
$ npm run android

为什么选择 Create React App

1. 使用配置包、转码器，以及测试运行器进行开发的一流工具
2. 在应用架构里不需要配置以及没有额外文件
3. 确定的开发栈
4. 高效快速的开发工具

2、Material Kit React

Material Kit React 是受谷歌的 Material Design 系统启发开发的，很适合用来创建 React UI 组件。这个库最大的优点是提供了大量的组件，可以互相搭配做出非常好的效果。有超过一千个完全编码的组件，每一个都有用文件夹组织起来的独立层。这样你就可以有上千个选项可以选择。它同时也包含一些示例页面，方便你从中寻找灵感，或者向别人分享你的点子或创意。

安装 Material Kit

$ npm install @material-ui/core

使用

import React from 'react';
import Button from '@material-ui/core/Button';

const App = () => (
  <Button variant="contained" color="primary">
    Hello World
  </Button>
);

Material-UI 组件不需要其他额外设置，也不会干扰全局变量空间。

优点

这个 React 组件支持简易快速的网页开发。你可以用它创建自己的设计系统，或者直接开始 Material Design。

3、Shards React

这个现代的 React UI 工具为了追求高效率，是从最底层开始构建的。它拥有现代的设计系统，可以让你按自己的想法任意定制。你甚至可以下载源文件，然后从代码级别定制。另外，它用来设计样式的 SCSS 语法提高了开发体验。

Shards React 基于 Shards，使用了 React Datepicker、React Popper（一个定位引擎）和 noUISlider。还带有非常优秀的 Material Design 图标。还有很多设计好的版本，可以帮你寻找灵感或上手。

用 Yarn 或 NPM 安装 Shards

# Yarn
yarn add shards-react

# NPM
npm i shards-react

优点

1. Shards 是一个轻量级的脚本，压缩后大概 13kb
2. Shards 默认支持响应式，图层可以适配任意大小屏幕
3. Shards 有完整的文档，可以快速开始构建漂亮的界面

4、Styled Components

这个高效的 CSS 工具可以用来为应用的可视界面创建小型可重用的组件。使用传统的 CSS，你可能会不小心覆盖掉网站其他位置的选择器，但 Styled Components 通过使用直接内嵌到组件里的 CSS 语法，可以完全避免这个问题。

安装

npm install --save styled-components

使用

const Button = styled.button`
  background: background_type;
  border-radius: radius_value;
  border: abc;
  color: name_of_color;
  Margin: margin_value;
  padding: value`;

优点

1. 让组件有更好的可读性
2. 组件样式依赖 JavaScript
3. 创建定制 CSS 组件
4. 内嵌样式
5. 简单地调用 styled() 可以将组件甚至是自定义组件转换成样式组件

5、Redux

Redux 是一个为 JavaScript 应用提供状态管理的方案。常用于 React.js，也可以用在其他类 React 框架里。

安装

sudo npm install redux
sudo npm install react-redux

使用

import { createStore } from "redux";
import rotateReducer from "reducers/rotateReducer";

function configureStore(state = { rotating: value}) {
  return createStore(rotateReducer,state);
}

export default configureStore;

优点

1. 可预计的状态更新有助于定义应用里的数据流
2. 逻辑上测试更简单，使用 reducer 函数进行时间旅行调试也更容易
3. 统一管理状态

6、React Virtualized

这个 React Native JavaScript 框架帮助渲染 large-list 和 tabular-data。使用 React Virtualized，你可以限制请求和文档对象模型（DOM）元素的数量，从而提高 React 应用的性能。

安装

npm install react-virtualized

使用

import 'react-virtualized/styles.css'
import { Column, Table } from 'react-virtualized'
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
import List from 'react-virtualized/dist/commonjs/List'
{
  alias: {
    'react-virtualized/List': 'react-virtualized/dist/es/List',
  },
  ...等等
}

优点

1. 高效展示大量数据
2. 渲染超大数据集
3. 使用一系列组件实现虚拟渲染

7、React DnD

React DnD 用来创建复杂的拖放界面。拖放控件库有很多，选用 React DnD 是因为它是基于 HTML5 的拖放 API 的，创建界面更简单。

安装

npm install react-dnd-preview

使用

import Preview from 'react-dnd-preview';
 
const generatePreview = ({itemType, item, style}) => {
  return <div class="item-list" style={style}>{itemType}</div>;
};

class App extends React.Component {
 ...
  render() {
    return (
      <DndProvider backend={MyBackend}>
        <ItemList />
        <Preview generator={generatePreview} />
        // or
        <Preview>{generatePreview}</Preview>
      </DndProvider>
    );
  }
}

优点

1. 漂亮自然的控件移动
2. 强大的键盘和屏幕阅读支持
3. 极限性能
4. 强大整洁的接口
5. 标准浏览器支持非常好
6. 中性样式
7. 没有额外创建 DOM 节点

8、React Bootstrap

这个 UI 库将 Bootstrap 的 JavaScript 替换成了 React，可以更好地控制每个组件的功能。每个组件都构建成能轻易访问，因此 React Bootstrap 有利于构建前端框架。有上千种 bootstrap 主题可以选择。

安装

npm install react-bootstrap bootstrap

使用

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

优点

1. 可以简单导入所需的代码/组件
2. 通过压缩 Bootstrap 节省了输入和问题
3. 通过压缩 Bootstrap 减少了输入工作和冲突
4. 使用简单
5. 使用元素封装

9、React Suite

React Suite 是另一个高效的 React.js 框架，包含了大量组件库，方便开发企业级产品。支持所有主流浏览器和平台，适用于任何系统。还支持服务器端渲染。

安装

npm i rsuite --save

使用

import { Button } from 'rsuite';
import 'rsuite/styles/less/index.less';
ReactDOM.render(<Button>Button</Button>, mountNode);

优点

1. 通过全局访问特性轻松管理应用
2. 使用 Redux 库集中管理系统状态
3. Redux 库有灵活的 UI 层，以及广泛的生态
4. Redux 库减少系统复杂度，并提供了全局访问特性

10、PrimeReact

PrimeReact 最值得推荐的是它提供了几乎覆盖所有基本 UI 需求的组件，比如输入选项，菜单，数据展示，消息，等等。这个框架还优化了移动体验，帮助你设计触摸优化的元素。

安装

npm install primereact --save
npm install primeicons --save

使用

import {Dialog} from 'primereact/dialog';
import {Accordion,AccordionTab} from 'primereact/accordion';
dependencies: {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-transition-group": "^2.2.1",
    "classnames": "^2.2.5",
    "primeicons": "^2.0.0"
}

优点

1. 简单而高效
2. 容易使用
3. Spring 应用
4. 创建复杂用户界面
5. 好用而简单

11、React Router

React Router 在 React Native 开发社区很受欢迎，因为它上手很容易。只需要你在电脑上安装 Git 和 npm 包管理工具，有 React 的基础知识，以及好学的意愿。没什么特别难的地方。

安装

$ npm install --save react-router

使用

import { Router, Route, Switch } from "react-router";
 
// 使用 CommonJS 模块
var Router = require("react-router").Router;
var Route = require("react-router").Route;
var Switch = require("react-router").Switch;

优点

1. 动态路由匹配
2. 在导航时支持不同页面的 CSS 切换
3. 统一的应用结构和行为

12、Grommet

Grommet 常用于开发响应式、可访问的移动网页应用。这个用 Apache 2.0 许可证授权的 JavaScript 框架最大的优点是用很小的包提供了可访问性、模块化、响应式以及主题功能。这可能是它被一些公司广泛使用的主要原因，比如奈飞、通用电气、优步以及波音。

安装 for yarn and npm

$ npm install grommet styled-components --save

使用

"grommet-controls/chartjs": {
          "transform": "grommet-controls/es6/chartjs/${member}",
          "preventFullImport": true,
          "skipDefaultConversion": true

优点

1. 创建一个工具包来打包
2. 把开放政策发挥到极致
3. 重构有助于影响已成立的组织

13、Onsen UI

Onsen UI 另一个使用 HTML5 和 JavaScript 的手机应用开发框架，集成了 Angular、Vue 和 React，使用 Apache 2.0 许可证授权。

Onsen 提供了标签、侧边栏、堆栈导航以及其他组件。这个框架最好的地方是，它所有的组件都支持 iOS 和安卓 Material Design 自动适配，会根据不同的平台切换应用的外观。

安装

npm install onsenui

使用

(function() {
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope) {
      // more to come here
    });

})();

优点

1. Onsen UI 基于自由而开源代码
2. 不强制基于它开发的应用使用任何形式的 DRM
3. 内置了 JavaScript 和 HTML5 代码
4. 给最终用户带来原生体验

你最喜欢哪个 React JavaScript 框架？请在评论区分享。

via: https://opensource.com/article/20/1/react-javascript-frameworks

作者：Amit Dua 选题：lujun9972 译者：zpl1025 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

根据 JavaScript 框架的优点和主要特点对许多 JavaScript 框架进行细分。

大约十年前，JavaScript 社区开始见证一场 JavaScript 框架的激战。在本文中，我将介绍其中最著名的一些框架。值得注意的是，这些都是开源的 JavaScript 项目，这意味着你可以在 开源许可证 下自由地使用它们，甚至为它们的源代码和社区做出贡献。

不过，在开始之前，了解一些 JavaScript 开发者谈论框架时常用的术语，将对后续的内容大有裨益。

我们已经清楚了常用的术语，下面我们来探索一下开源的 JavaScript 框架有哪些。

为了说明情况，下面是每个框架的 NPM 包下载量的公开数据，感谢 npm trends。

ReactJS

ReactJS 是由 Facebook 研发的，它虽然在 Angular 之后发布，但明显是当今 JavaScript 框架的领导者。React 引入了一个虚拟 DOM 的概念，这是一个抽象副本，开发者能在框架内仅使用他们想要的 ReactJS 功能，而无需重写整个项目。此外，React 项目活跃的开源社区无疑成为增长背后的主力军。下面是一些 React 的主要优势：

• 合理的学习曲线 —— React 开发者可以轻松地创建 React 组件，而不需要重写整个 JavaScript 的代码。在 ReactJS 的 首页 查看它的优点以及它如何使编程更容易。
• 高度优化的性能 —— React 的虚拟 DOM 的实现和其他功能提升了应用程序的渲染性能。请查看 ReactJS 的关于如何对其性能进行基准测试，并对应用性能进行衡量的相关 描述。
• 优秀的支持工具 —— Redux、Thunk 和 Reselect 是构建良好、可调式代码的最佳工具。
• 单向数据绑定 —— 模型使用 Reach 流，只从所有者流向子模块，这使得在代码中追踪因果关系更加简单。请在 ReactJS 的 数据绑定页 阅读更多相关资料。

谁在使用 ReactJS？Facebook 自从发明它，就大量使用 React 构建公司首页，据说 Instagram 完全基于 ReactJS 库。你可能会惊讶地发现，其他知名公司如 纽约时报、Netflix 和 可汗学院 也在他们的技术栈中使用了 ReactJS。

更令人惊讶的是 ReactJS 开发者的工作机会，正如在下面 Stackoverflow 所做的研究中看到的，嘿，你可以从事开源项目并获得报酬。这很酷！

Stackoverflow 的研究显示了对 ReactJS 开发者的巨大需求——来源：2017 年开发者招聘趋势——Stackoverflow 博客

ReactJS 的 GitHub 目前显示超过 13,000 次提交和 1,377 位贡献者。它是一个在 MIT 许可证下的开源项目。

Angular

就开发者数量来说，也许 React 是现在最领先的 JavaScript 框架，但是 Angular 紧随其后。事实上，开源开发者和初创公司更乐于选择 React，而较大的公司往往更喜欢 Angular（下面列出了一些例子）。主要原因是，虽然 Angular 可能更复杂，但它的统一性和一致性适用于大型项目。例如，在我整个职业生涯中一直研究 Angular 和 React，我观察到大公司通常认为 Angular 严格的结构是一种优势。下面是 Angular 的另外一些关键优势：

• 精心设计的命令行工具 —— Angular 有一个优秀的命令行工具（CLI），可以轻松起步和使用 Angular 进行开发。ReactJS 提供命令行工具和其他工具，同时 Angular 有广泛的支持和出色的文档，你可以参见 这个页面。
• 单向数据绑定 —— 和 React 类似，单向数据绑定模型使框架受更少的不必要的副作用的影响。
• 更好的 TypeScript 支持 —— Angular 与 TypeScript 有很好的一致性，它其实是 JavaScript 强制类型的拓展。它还可以转译为 JavaScript，强制类型是减少错误代码的绝佳选择。

像 YouTube、Netflix、IBM 和 Walmart 等知名网站，都已在其应用程序中采用了 Angular。我通过自学使用 Angular 来开始学习前端 JavaScript 开发。我参与了许多涉及 Angular 的个人和专业项目，但那是当时被称为 AngularJS 的 Angular 1.x。当 Google 决定将版本升级到 2.0 时，他们对框架进行了彻底的改造，然后变成了 Angular。新的 Angular 是对之前的 AngularJS 的彻底改造，这一举动带来了一部分新开发者也驱逐了一部分原有的开发者。

截止到撰写本文，Angular 的 GitHub 页面显示 17,781 次提交和 1,133 位贡献者。它也是一个遵循 MIT 许可证的开源项目，因此你可以自由地在你的项目或贡献中使用。

VueJS

VueJS 是一个非常有趣的框架。它是 JavaScript 框架领域的新来者，但是在过去几年里它的受欢迎程度显著增加。VueJS 由 尤雨溪 创建，他是曾参与过 Angular 项目的谷歌工程师。该框架现在变得如此受欢迎，以至于许多前端工程师更喜欢 VueJS 而不是其他 JavaScript 框架。下图描述了该框架随着时间的推移获得关注的速度。

这里有一些 VueJS 的主要优点：

• 更容易地学习曲线 —— 与 Angular 或 React 相比，许多前端开发者都认为 VueJS 有更平滑的学习曲线。
• 小体积 —— 与 Angular 或 React 相比，VueJS 相对轻巧。在 官方文档 中，它的大小据说只有约 30 KB；而 Angular 生成的项目超过 65 KB。
• 简明的文档 —— VueJS 有全面清晰的文档。请自行查看它的 官方文档。

VueJS 的 GitHub 显示该项目有 3,099 次提交和 239 位贡献者。

MeteorJS

MeteorJS 是一个自由开源的 同构框架，这意味着它和 NodeJS 一样，同时运行客户端和服务器的 JavaScript。Meteor 能够和任何其他流行的前端框架一起使用，如 Angular、React、Vue、Svelte 等。

Meteor 被高通、马自达和宜家等多家公司以及如 Dispatch 和 Rocket.Chat 等多个应用程序使用。您可以其在官方网站上查看更多案例。

Meteor 的一些主要功能包括：

• 在线数据 —— 服务器发送数据而不是 HTML，并由客户端渲染。在线数据主要是指 Meteor 在页面加载时通过一个 WebSocket 连接服务器，然后通过该链接传输所需要的数据。
• 用 JavaScript 开发一切 —— 客户端、应用服务、网页和移动界面都可以用 JavaScript 设计。
• 支持大多数主流框架 —— Angular、React 和 Vue 都可以与 Meteor 结合。因此，你仍然可以使用最喜欢的框架如 React 或 Angular，这并不防碍 Meteor 为你提供一些优秀的功能。

截止到目前，Meteor 的 GitHub 显示 22，804 次提交和 428 位贡献者。这对于开源项目来说相当多了。

EmberJS

EmberJS 是一个基于 模型-视图-视图模型（MVVM） 模式的开源 JavaScript 框架。如果你从来没有听说过 EmberJS，你肯定会惊讶于有多少公司在使用它。Apple Music、Square、Discourse、Groupon、LinkedIn、Twitch、Nordstorm 和 Chipotle 都将 EmberJS 作为公司的技术栈之一。你可以通过查询 EmberJS 的官方页面 来发掘所有使用 EmberJS 的应用和客户。

Ember 虽然和我们讨论过的其他框架有类似的好处，但这里有些独特的区别：

• 约定优于配置 —— Ember 将命名约定标准化并自动生成结果代码。这种方法学习曲线有些陡峭，但可以确保程序员遵循最佳实践。
• 成熟的模板机制 —— Ember 依赖于直接文本操作，直接构建 HTML 文档，而并不关心 DOM。

正如所期待的那样，作为一个被许多应用程序使用的框架，Ember 的 GitHub 页面显示该项目拥有 19,808 次提交和 785 位贡献者。这是一个巨大的数字！

KnockoutJS

KnockoutJS 是一个独立开源的 JavaScript 框架，采用 模板-视图-视图模型（MVVM） 模式与模板。尽管与 Angular、React 或 Vue 相比，听说过这个框架的人可能比较少，这个项目在开发者社区仍然相当活跃，并且有以下功能：

• 声明式绑定 —— Knockout 的声明式绑定系统提供了一种简洁而强大的方式来将数据链接到 UI。绑定简单的数据属性或使用单向绑定很简单。请在 KnockoutJS 的官方文档页面 阅读更多相关信息。
• 自动 UI 刷新。
• 依赖跟踪模板。

Knockout 的 GitHub 页面显示约有 1,766 次提交和 81 位贡献者。与其他框架相比，这些数据并不重要，但是该项目仍然在积极维护中。

BackboneJS

BackboneJS 是一个具有 RESTful JSON 接口，基于 模型-视图-主持人 Model-View-Presenter （MVP）设计范式的轻量级 JavaScript 框架。

这个框架据说已经被 Airbnb、Hulu、SoundCloud 和 Trello 使用。你可以在 Backbone 的页面 找到上面所有这些案例来研究。

BackboneJS 的 GitHub 页面显示有 3,386 次提交和 289 位贡献者。

Svelte

Svelte 是一个开源的 JavaScript 框架，它生成操作 DOM 的代码，而不是包含框架引用。在构建时而非运行时将应用程序转换为 JavaScript 的过程，在某些情况下可能会带来轻微的性能提升。

Svelte 的 GitHub 页面显示，截止到本文撰写为止，该项目有 5,729 次提交和 296 位贡献者。

AureliaJS

最后我们介绍一下 Aurelia。Aurelia 是一个前端 JavaScript 框架，是一个现代 JavaScript 模块的集合。Aurelia 有以下有趣的功能：

• 快速渲染 —— Aurelia 宣称比当今其他任何框架的渲染速度都快。
• 单向数据流 —— Aurelia 使用一个基于观察的绑定系统，将数据从模型推送到视图。
• 使用原生 JavaScript 架构 —— 可以用原生 JavaScript 构建网站的所有组件。

Aurelia 的 GitHub 页面显示，截止到撰写本文为止该项目有 788 次提交和 96 位贡献者。

这就是我在查看 JavaScript 框架世界时发现的新内容。我错过了其他有趣的框架吗？欢迎在评论区分享你的想法。

via: https://opensource.com/article/20/5/open-source-javascript-frameworks

作者：Bryant Son 选题：lujun9972 译者：stevending1st 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

三分之二的开发者在使用 JavaScript

在 jetbrains 针对近 3.2 万名开发者的调查中，JavaScript 的使用率为 69%，而 39% 的开发者将其作为主要使用语言。Java 则是 32%，PHP 为 22%。

该调查也体现了一些明显的地区差异。Java 在中国和韩国最受欢迎；英国的 JavaScript、PHP 和 Python 的使用高于平均水平；美国的 JavaScript 和 Python；以及印度的 JavaScript、Python 和 C++ 等名列前茅。

没谁会想到一个赶工设计出来的脚本语言已经成为了庞然大物。

DeepMind 开源 AlphaFold

去年底，Google 子公司 DeepMind 宣布取得了一项重大突破：AI 能根据蛋白质的氨基酸序列判断其三维结构。这一突破有望大大加快新药的开发过程。DeepMind 的 AlphaFold 系统能够在数天内提供准确结果，精度在一个原子的宽度以内。本周 DeepMind 在《自然》期刊上发表论文， 宣布 AlphaFold 精度在大部分情况下能与实验室结果相竞争，远超其它方法。并在 GitHub 上采用 Apache 许可证开源了 AlphaFold 。

虽然 OpenAI 解散了机器人团队，但是 AI 的发展依然值得期待。

针对 IoT 设备的攻击在两年间增长了 700%

新冠大流行使得许多企业办公室没有工作人员，但仍有很多工作在进行。各种各样的设备如联网打印机、数字标牌、智能手表和其他物联网设备都被留在了办公室。大多数网络攻击的源头主要来自印度、美国等国，而中国、美国和爱尔兰是 IoT 设备最受攻击的国家。约 98% 的物联网攻击受害者在医疗保健、零售和批发、制造和技术部门工作。研究显示，在 18000 台主机上发现了 900 个不同的载荷，在 70 多个不同制造商的设备上发现了恶意软件。

这些没人管理、没有升级的 IoT 设备会是一个大的隐患。

JavaScript 前端工具的生态系统充满着变数和竞争，且只有最好的工具才会存活下来。

生产中使用的代码与开发中的有所不同. 在生产中，我们需要构建一些能运行得够快、能管理各种依赖关系、能自动执行任务、能加载外部模块等功能的包。而那些将开发中的代码转为生产代码的 JavaScript 工具我们就称之为 构建工具。

我们可以通过各个构建步骤以及其重要性来解释前端代码需要被“构建”的原因。

前端代码构建步骤

前端代码的构建涉及下面的四个步骤:

1、转译

通过 转译 Transpiling ，开发者可以使用到语言最新、最热门的更新和扩展，并保持浏览器的兼容性等。下面是使用 Babel 的一个例子:

// 数组映射中的箭头函数语法
const double = [1, 2, 3].map((num) => num * 2);
// 转译后
const double = [1, 2, 3].map(function(num) {
  return num * 2;
});

2、分包

分包 Bundling 是处理所有 import 与require 语句的过程；找到相匹配的 JavaScript 代码片段、包和库；将它们添加到适当的域中；然后将它们打包到一个大的 JavaScript 文件中。常用的分包器包括 Browserify、Webpack 与 Parcel。

3、压缩

压缩 Minifing 是通过删除空白和代码注释来减少最终的文件大小。在压缩过程中，我们还可以更进一步添加代码混淆步骤，混淆会更改变量名和方法名，使代码变得晦涩难懂，因此一旦代码交付到客户端，它就不是那么容易能让人读懂。下面是一个使用 Grunt 的例子:

// 压缩前
const double = [1, 2, 3].map(function(num) {
  return num * 2;
});
// 压缩后
const double=[1,2,3].map(function(num){return num*2;});

4、打包

完成上面的所有步骤之后, 我们需要将这些具有兼容性、且经过分包、压缩/混淆过的文件放置到某个地方。 打包 Packaging 正是这样一个过程，它将上述步骤所产生的结果放置到开发者指定的某个位置上，这通常是通过打包器完成的。

前端构建工具

前端工具及构建工具可以分为以下几类:

• 包管理: NPM、Yarn
• 转译器: Babel 等
• 打包器: Webpack、Parcel、Browserify
• 压缩混淆: UglifyJS、Packer、Minify 等

JavaScript 生态系统中有各种各样的构建工具可以使用，包括下面的这些：

Grunt 和 Bower

Grunt 是作为命令行工具引入的，它仅提供一个脚本来指定和配置相关构建任务。Bower 作为包管理器，提供了一种客户端包的管理方法而紧追其后。这两者，再加上 NPM，它们经常在一起使用，它们看上去似乎可以满足大多数的自动化需求，但 Grunt 的问题在于它无法提供给开发者配置更复杂任务的自由，而 Bower 使开发者管理的程序包是平常的两倍，因为它将前端包、后台包分开了（例如，Bower 组件与 Node 模块）。

Grunt 与 Bower 的未来： Grunt 与 Bower 正在退出 JavaScript 工具生态，但是还有一些替代品。

Gulp 和 Browserify

Gulp 是在 Grunt 发布一年半之后才发布的。但 Gulp 却让大家感到很自然、舒服。用 JavaScript 来写构建脚本与用 JSON 来写相比更自由。你可以在 Gulp 的构建脚本中编写函数、即时创建变量、在任何地方使用条件语句 —— 但就这些，并不能说让我们的感觉变得特别自然和舒适，只能说这只是其中的一个可能的原因。Browserify 和 Gulp 可以配合使用，Browserify 允许 NPM 包（用于后端 Node 服务器）被直接带入到前端，就这一点已经直接让 Bower 废了。而正是这种用一个包管理器来处理前后端包的方式让人感到更自然和更好。

Gulp 的未来： Gulp 可能会被改进，以便匹配当前流行的构建工具，但这完全取决于创造者的意愿。Gulp 仍在使用中，只是不再像以前那么流行了。

Webpack 和 NPM/Yarn 脚本

Webpack 是现代前端开发工具中最热门的宠儿，它是一个开源的 JavaScript 模块打包器。Webpack 主要是为处理 JavaScript 而创造的，但如果包含相应的加载器，它也可以转换 HTML、CSS 和图片等前端资源。通过 Webpack，你也可以像 Gulp 一样编写构建脚本，并通过 NPM/Yarn 来执行它们。

Webpack 的未来： Webpack 是目前 JavaScript 工具生态系统中最热门的工具，最近几乎所有的 JavaScript 库都在使用 React 和 Webpack。Webpack 目前处于第四个版本，不会很快消失。（LCTT 译注：Webpack 目前已经发布了第五个版本了，且还在火热更新中）

Parcel

Parcel 是一个 Web 应用打包器，于 2018 年推出，因其开发者体验而与众不同。Parcel 能利用处理器多核功能提供极快的打包性能，且还零配置。但 Parcel 还是一个新星，对于一些大型应用，其采用率并不高。相比之下，开发人员更喜欢使用 Webpack，因为 Webpack 有更广泛的支持和可定制性。

Parcel 的未来： Parcel 非常容易使用，如果你统计打包和构建时间，它会比 Webpack 更快，而且它还提供了更好的开发者体验。Parcel 没有被大量采用的原因可能是它仍然比较新。在前端构建工具的生态系统中，Parcel 的前景会非常光明，它将会存在一段时间。

Rollup

Rollup 是 JavaScript 的一个模块分包器，它可将一小段代码编译为更大更复杂的库或应用。Rollup 一般建议用来构建 JavaScript 库，特别是那种导入和依赖的第三方库较少的那种库。

Rollup 的未来： Rollup 很酷，且正在被迅速采用。它有很多强大的功能，将在很长一段时间内作为前端工具生态系统的一个组成部分而存在。

了解更多

JavaScript 前端工具的生态系统充满着变数和竞争，且只有最好的工具才能存活下来。在不久的将来，我们的构建工具将具有更少（或没有）的配置，更方便的定制化，更好的扩展性的和更好的构建速度。

该用什么样的构建工具用于你的前端项目，你需要根据具体的项目需求来做出决定。至于选择什么样的工具，才是最合适自己的，大多数时候，需要我们自己作出取舍。

更多信息, 请看:

• JavaScript tooling: The evolution and future of JS/frontend build tools
• Tools and modern workflow for frontend developers
• Modern frontend: The tools and build process explained
• Best build tools in frontend development

这篇文章最初发表在 Shedrack Akintayo 的博客 上，经许可后重新发表。

via: https://opensource.com/article/20/11/javascript-build-tools

作者：Shedrack Akintayo 选题：lujun9972 译者：ywxgod 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

报告称全球半年增加了 300 万开发者，JavaScript 开发人员占一半

SlashData 半年一次的《State of the Developer Nation》报告称，全球开发者已经从 2020 年 10 月的 2130 万增加到今天的 2430 万，增长了约 14%，300 万人。

现在有 1380 万 JavaScript 开发人员（包括 TypeScript 和 CoffeeScript），比去年 10 月增加了 140 万人。这意味着超过 50% 的活跃开发者使用 JavaScript。但他们并不只使用 JavaScript；即使主要语言是 Java、C# 或 PHP，在许多项目中也至少需要一丁点 JavaScript。即使在数据科学或嵌入式开发等领域，也有大约 1/4 的开发人员在他们的项目中使用 JavaScript。

Python 开发者 1010 万，排名第二，增长率为 20%，是所有大型编程语言社区中最高的。Rust 的增长速度更快，但基数较小，从 80 万增加到了 130 万活跃开发者。

PHP 的数量为 630万，已经滑落到第六位，被 C# 超过了。虽然 PHP 是使用最广泛的服务器端编程语言，但是其大多数用户不是开发者。

好吧，我觉得 JavaScript 开发者的门槛也太低了。如果抛开专业开发人员不说，编程开发技能以后或许会像 Excel 一样会一点就算会用——哦，说起来，Excel 及其用户才是全球最大的编程语言和开发者群体。

微软 Defender 利用机器学习技术来检测恶意挖矿

加密劫持是一种恶意行为，攻击者在主机设备上安装恶意软件，然后利用计算机的资源来挖掘加密货币导致性能受到影响，或者干脆直接窃取加密货币钱包。微软和英特尔联合宣布，在微软 Defender 中使用基于后者的威胁检测技术（TDT）来检测加密货币恶意挖矿程序的新功能。该解决方案利用 CPU 遥测和机器学习启发式算法来识别异常活动。一旦检测到潜在的恶意行为，它就会向端点检测和响应 EDR 机制发送信号，进而触发修复工作流程，以保护受感染的 PC 和网络上的其他设备。

确实，在 PC 中集成挖矿劫持检测功能是有必要的，反正现在自己用 PC 挖矿也不现实，如果你的 PC 在挖矿，那几乎都是被劫持用来大规模挖矿了。

诺基亚将在月球上部署 4G 网络

美国 NASA 正计划在本世纪末在月球上建立一个可持续的人类存在，去年 NASA 向诺基亚提出了一个不同寻常的要求：设计一个系统，建立一个 4G 网络，供未来的月球漫步宇航员使用。

在太空里使用网络并不新鲜，国际空间站（ISS）上的宇航员自 2008 年以来一直在使用 Wi-Fi，甚至可以将他们的宇航服连接到网络上。诺基亚的方案略有不同，该公司的任务是在月球上建立一个本地网络，该网络将只延伸大约 5 公里，以实现宇航员和地面设备之间的通信。

虽然现在都在吵吵 5G ，但是我觉得 4G 就挺好的。

研究人员教会机器人如何逃离熊孩子殴打

在日本的一家商场里，一帮没有人监管的熊孩子反复对机器人拳打脚踢、摇晃……

日本一个研究小组开发了一个计算机模拟和统计模型，显示熊孩子们对机器人的虐待主要发生在他们成群结队且附近没有成年人的时候。他们设计了一种躲避虐待的算法，帮助机器人避免这些熊孩子可能结伙攻击它的情况。机器人会计算出被虐待的概率。如果机器人在统计上处于危险之中，它就会改变路线，走向更拥挤的区域或更高的人。

根据阿西莫夫三定律，机器人不能伤害人类，而随着各种智能机器人出现在我们的身边，我们是时候教会机器人如何保护自己了。

Node.js 的竞争对手 Deno 成立商业公司

Deno 的创建者们已经成立了 Deno 公司，这是一家围绕 JavaScript/TypeScript 运行时的商业企业，也是 Node.js 的竞争对手。他们表示，虽然他们计划追求 Deno 的商业应用，但 Deno 本身仍将保持 MIT 授权。Deno 的创始人们认为，服务器端 JavaScript 被委员会统治，没有创新的动力，停滞不前。他们希望能够为不同的应用程序创建自定义运行时环境。

我认为，Deno 的出现和商业化，会有力的推动 JavaScript 的发展。

微软的 Linux 版 Edge 浏览器现在支持跨设备同步功能

微软最近在开发通道发布的 Linux 版 Edge 浏览器，可以让 Linux 用户在设备之间同步他们的书签、扩展、设置和历史记录。

微软决定放弃支持自己的 Edge 浏览器引擎，而选择开源的 Chromium 浏览器引擎，至少在支持 Linux 上，有着先天的优势，因为 Chromium 浏览器引擎已经在 Linux 上证明了自己。