Webpack 配置

配置你的 webpack 构建过程并真正理解你在做什么，可能是 2017 年更令人畏惧的学习曲线之一。幸运的是，他们的核心贡献者之一 Sean Larkin 奔走在世界各地，为我们提供了很棒的演讲和非常有趣和有用的教程。

现在许多框架不仅为您创建了 webpack 配置文件，甚至将它们填充到您甚至可能不需要看的地步。Vue 的 CLI 工具有一个 webpack 专用的模板，为您提供全功能的 Webpack 设置。为了让您充分了解命令行工具提供的内容，以下是 Vue CLI 模板包含的内容：

• npm run dev: 首要开发体验
  • 用于 Vue 单文件组件的 Webpack + vue-loader
  • 热更新中的状态保持
  • 编译错误时的状态保持
  • 保存时使用 ESLint 检查
  • 源文件映射（Source Map）
• npm run build: 为生产环境准备好构建
  • 使用 UglifyJS v3 最小化 JavaScript
  • 使用 html-minifier 最小化 HTML
  • 使用 cssnano 提取所有组件中的 CSS 并最小化
  • 对静态资源计算 Hash 使之在缓存中长期有效，并自动为生产环境生成使用这些静态资源 URL 的 index.html
  • 使用 npm run build –report 构建并生成含有流量分析的报告
• npm run unit: 使用 Jest  在 JSDOM 中运行单元测试，或者在 PhantomJS 中使用 Karma + Mocha + karma-webpack
  • 测试文件支持 ES2015+
  • 简单打桩
• npm run e2e: 使用 Nightwatch 进行端到端测试
  • 自动处理 Selenium 和 chromedriver 依赖
  • 自动生成 Selenium 服务器
  • 在多个浏览器中并行地运行测试
  • 使用一个非常好的命令行工具：

preact-cli，从另一个方面支持着 Webpack 的功能。如果你需要自定义 webpack 配置，只需要创建 preact.config.js，它导出一个函数来改变 webpack。大量的工具带来了大量的便捷性，开发人员们也在相互帮助。

app.js和编译之后带hash的js

那么我如何入手呢？

我整理了一个GitHub库，里面包含一个基本的前端开发配置：https://github.com/wzxm/react-starter.git。

它使用：

• React；
• Babel转译；
• Webpack构建；
• ES6语法（针对React类和模块导出）；
• Karma + Jasmine + PhantomJS测试；

让我们稍微详细地讨论下。React是我们使用的框架，它让我们可以更轻松地创建交互式站点。（你描述UI，React会为你渲染并处理DOM操作。）我们将编写符合ES6规范的JavaScript代码。Webpack会使用Babel将ES6 JavaScript代码转译成兼容ES5的JavaScript代码。Webpack还会管理依赖和模块导入。最后，我们使用Karma和PhantomJS运行测试，并使用Jasmine库编写这些测试。

首先，确保你有一个可用的npm版本。然后，安装这个GitHub库的依赖，并开始使用：

npm install
webpack

然后，使用它进行开发，运行：

webpack --watch

这会指示webpack监视项目，并在JavaScript文件变化时重新编译它。想要查看应用程序，就需要启动一个本地服务器。在OS X或Linux上，使用Python很容易做到：

python -m SimpleHTTPServer

……你已经准备好开始了!编辑app.js或Hello.js增加更多的React组件，并使用npm test来运行测试。

当然，有一个可以工作的初始代码库只是成功的一半。前端JavaScript开发领域很复杂，有大量的工具、术语以及新概念需要学习，同时也有大量的问题需要解决。上述任意一个主题都很容易写满一个博客。希望这篇文章能让你对JavaScript生态圈有一些了解，能在你学习更多有关前端开发的知识时提供一些指导。

最后
对全局引导类的文章，在我看来还是有一定的帮助，至少让你知道了原来还有这个东西，犹如很多构建工具的依赖包一样，当你需要了，你可以立马学习并使用它。有新东西出来并不可怕，说明前端社区至少还是很活跃，大家选择入前端坑还是没错的。以自己的思考去选择适合自己的也是蛮有学问的事情。

微信原文：2016年JavaScript领域中最受欢迎的“明星”们

命令行工具

大多数库和框架都配备有一个命令行工具，通过输入一个命令，可以为我们启动一些框架项目，以快速创建我希望的东西。这通常包括一个启动脚本（有时用自动重新加载器），构建脚本，测试结构等等。当我们创建新项目时，这些工具可以减轻我们大量冗余文件的编写。让我们来看看更多其他的一些命令行工具。

在安装 Webpack 前，你本地环境需要支持 node.js。安装node.js可以参考node官方文档。

框架是什么？我需要使用trendy.js吗？

关键术语：React、Angular、Ember、Backbone、jQuery、Underscore、Lodash

“框架”这个词有许多意思。JavaScript框架的目标通常是减少构建交互式Web页面过程中无谓的工作。从根本上说，框架就是脚手架，设计用来解决一个特定种类的问题。

许多当前流行的框架都是设计用来解决这样的问题的，“如何创建一个支持复杂用户交互的单页Web应用，并在前端管理所有的业务逻辑？”单页应用或者SPA是不需要刷新页面的Web应用，产品的大部分都是作为一个单独的“页面”而存在——回想下Facebook首页或者Gmail收件箱。

那么该用哪个框架呢？React? Angular? 还是Ember?甚至说你需要框架吗？选择麻痹症的信号！

所有这些项目都试图帮你编写更好的Web应用程序。对于选择哪个框架，没有正确的答案，如果有，你就应该使用。

如果你是刚刚开始使用JavaScript，那么不使用框架可能会更好一些，尝试使用jQuery构建一个站点，其他的少用或不用。那很快就会变得让人厌烦，但你能做到，这会让你了解到一些重要的、有关JavaScript工作原理的东西。你还可以使用jQuery践行好的软件工程准则。

如果你正在开发一个相当复杂的站点，那么你会发现框架很有用。当前，Angular、React和Ember都是流行且明智的选择。Backbone是一个相对较小的老式框架；它也适合于许多项目。我为本文整理的初学者工具包使用了React，但实际上，没有错误的选择。TodoMVC使用不同的框架实现了同一个清单应用程序，检出它，自己比较一下各种框架。

JavaScript还缺少许多其他语言内置的标准库函数，像字符串填充或数组重排。为此，我们通常会使用像jQuery、Underscore和Lodash这样的库来弥补这种不足。按照惯例，这些库在导入后要分别使用$、和引用，因此，如果你看到一个JavaScript文件中有许多美元符号，几乎可以肯定这是调用了jQuery。

如果你要开始一个新项目，我建议使用React或者Angular以及Lodash。

TypeScript

最时髦的转换器是TypeScript，它为Web开发人员提供了Java和C＃开发人员使用的静态类型。事实上，Angular 2使用TypeScript增加了更多的牵引力。在JavaScript中使用类型有优缺点，阅读这些文章，使你自己的观点：

• 你可能不需要TypeScript:https：//medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b#.1pn05vlis

• TypeScript：缺失的介绍：https://toddmotto.com/typescript-the-missing-introduction

TypeScript 喜欢 Flow

在 2017 年，你大概看到了很多帖子在讨论 TypeScript

• Flow 的组合。Flow 是 JavaScript的静态类型检查器。 通过 Flow 你可以在图表中看到 JavaScript 的状态，这里面的内容包含了你感兴趣和不感兴趣的。尽管很多人还没有听说过 Flow，但是他们应该会对一些状态感兴趣。如果人们在 2018 年学习了更多的 Flow，那他们就会发现 Minko Gechev 所做的有用的事：

TypeScript 和 Flow 消除了你的产品中大约 15% 的 bug！ 还觉得类型系统没有用么？ 

$ npm install webpack -g

客户端JavaScript是如何工作的，为什么要使用它？

关键术语：DOM（文档对象模型）、JavaScript、async、AJAX

为了编写高效的前端代码，你需要对如何综合运用HTML、CSS和JavaScript创建Web页面有一个基本的了解。

当客户端（通常是浏览器）访问HTML页面时，它会下载它，解析它，然后使用它构造DOM（文档对象模型）。JavaScript可以同DOM交互及修改DOM，交互式站点就是这样创建的。这里有一个DOM的基本介绍。

JavaScript是如何包含到页面中的？那是另一个复杂的问题，但它是以script标签开始的。

JavaScript的执行会阻塞DOM构造。这就是说，执行JavaScript的时间过长会让人觉得页面没响应。为了避免这种情况，客户端JavaScript经常都是大量使用异步。（你可能听说过AJAX，它就代表asynchronous JavaScript and XML。）

如果你正在构建一个交互式站点，那么你会需要使用JavaScript，你可能会使用这种或另一种方式处理异步。

前瞻

在2017年密切关注的一个项目：Weex，一个构建在Vue.JS之上的移动跨平台UI框架。

2018 年，我们该如何使用 JavaScript？

2018/03/14 · JavaScript · 1 评论 · Javascript

原文出处： Tara Z. Manicsic   译文出处：开源中国   

从命令行工具和 webpack 到 TypeScript，Flow 等其他工具，我们不妨来讨论一下在 2018 年该如何使用 JavaScript。

去年，包括我在内的很多人都在谈论 JavaScript 的乏力。事实上编写 JavaScript 应用程序的方式并没有真正减少，另外有很多命令行工具完成了大量繁重的工作，转译(transpiling)变得不那么重要，并且 TypeScript 能够减少类型错误的发生，这让我们轻松了不少。

注：本博客文章是我们的白皮书“JavaScript 的未来：2018 及远方”的一部分，它提供了有关 JavaScript 的最新分析和预测。

译者注：这里将 transpiling 译作“转译”，transpiling 是一个英文计算机术语。一般认为转译是一种特殊的编译，当将一种源代码语言编译成另外一种源代码语言时，就称为转译。文中提到的 TypeScript 能够编译成 JavaScript。

1、为什要使用WebPack

前言
虽然各种框架、库发版之快，但并不会阻止部分人去研究应用。昨天的文章可能带给你的是一些前端的名词解释，那么今天由@谢丽翻译的文章可能会给你另一番不同的感受。

Keystone

Keystone是我所知得到一个管理客户端并运行得最好的解决方案之一，以便管理来自MongoDB数据库的内容。管理界面自动从模型生成，具有所有CRUD操作和精细的过滤器。

Angular 喜欢 TypeScript

你可能注意到在 Angular 文档中所有的代码例子就是由 TypeScript 写的。曾经在某个时候，有一种建议，你应该选择过一遍 JavaScript 或者 TypeScript 的手册，不过，看起来 Angular 的心已经动摇了。查看连接 Angular 到 JS 风格的图表，我们会看到实际上有一小部分会被Angular 连接到 ES6（TypeScript: 3777, ES6: 3997）。我们静待它在 2018 对 Angular 的影响。

来自 JavaScript的状态

有关如何为您的下一个应用程序选择正确的 JavaScript 框架的一些专家建议，请参阅此白皮书。

毫无疑问，我们的 JavaScript 将在 2018 年快速发展。作为程序员，我们喜欢编写和使用那些让我们的生活更轻松的工具。不幸的是，这有时会导致更多的混乱和太多的选择。值得庆幸的是，命令行工具正在帮助我们减轻一些烦琐的工作，并且 TypeScript 已经满足了那些对类型错误感到厌恶的开发者。

// 配置文件使用commonjs规范
module.exports = {
  // 入口，是一个对象
  entry: {
    app: './app.js' // 相对路径
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一项是一个规则
    rules:[
      {
        test: /.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
        use: {
          loader: 'babel-loader', // 使用bable-loader来处理
          options: { // 指定参数

          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

关键术语显示为粗体。如果你想跳到可以工作的样板代码库，那么我已经将我的一些建议整理成了一个GitHub库。

Atom

Atom是由Github推动的、并且由Electron构建（像其他一些桌面应用程序，包括Slack桌面客户端），并非远远落后Visual Studio Code。关于Atom的一个有趣的事实：它的主要语言是CoffeeScript！

JavaScript 的未来

想要深入了解我们在 JavaScript 的发展方向？ 不妨查看我们的最新文章“2018 年 JavaScript 的未来及远方”。

阅读：JavaScript 的未来

1 赞 1 收藏 1 评论

使用以下命令在项目根目录下生成package.json文件。

我该用什么构建工具？

关键术语：grunt、gulp、bower、browserify、webpack、“热重载（hot reloading）”、sourcemap

一个script标签接一个script标签地请求将每个JavaScript依赖作为页面的一部分会很慢。因此，大多数站点都使用所谓的JavaScript bundles。捆绑过程会获取所有依赖，并把它们“捆绑”在一起，生成一个单独的文件，包含到页面中。根据需要，有些开发人员还会使用一个“最小化（minifying）”步骤，将所有不必要的字符从JavaScript代码中去除，而又不改变代码的功能。这可以减少客户端需要下载的数据量。

有些工具还支持诸如热重载及sourcemaps这样的特性，前者会在你保存一个文件时自动在浏览器中更新你的项目，后者提供了一个从捆绑好的JavaScript到其原始形式的映射，简化了调试工作。

本质上讲，我刚刚描述的是一个构建过程。不管是否大多数JavaScript开发人员都这样描述，你都是将代码编译成一个生产就绪的格式。“前端devops”或者管理构建、部署工具及依赖项的过程成为一项日益复杂的工作。

Grunt、gulp、broccoli、brunch、browserify和webpack都是JavaScript构建工具。比较它们非常困难，因为它们每一个都致力于解决不同的问题。它们中有许多使用了不同的抽象概念来讨论相同的问题，我们实在是还没有一个共用的术语库。

根据我的经验，开发人员往往对这些工具的配置文件不甚了解，因此就在项目之间粘来粘去。下面是我为初学者库整理的webpack配置文件，供参考：

var webpack = require('webpack');
module.exports = {
    entry: [
        "./app.js"
    ],
    output: {
        path: __ dirname + '/static',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { 
                test: /.js?$/, loader: 'babel-loader', query:{presets:['es2015', 'react']},
                exclude: /node_modules/
            }
        ]
    },
    plugins: []
}

如上，该webpack配置文件指示webpack完成以下工作：

• 启动app.js作为入口点；
• 处理以.js结尾的所有文件；
• 使用babel-loader对它们进行转换，尤其是处理ES6转译（所以es2015 query）和JSX（所以react query）；
• 将所有JavaScript文件捆绑成一个文件static/bundle.js。

对于新项目，我推荐webpack。它有很强的适应性，而且能够很好地处理具有复杂依赖图的大型项目。

前端之巅翻译并整理了这篇博文，以飨读者。

谈谈 TypeScript

如果我们在谈 JavaScript，那就不得不谈谈 TypeScript。5 年前从微软办公室诞生的 TypeScript 发展到 2017 年，已经非常酷了。几乎没有什么会议在谈论“我们为什么喜欢 TypeScript”，但它为开发带来了新的体验，自然受到人们喜欢。对于 TypeScript，不需要赞美，我们只是谈谈开发者在使用它的时候为什么会感到轻松。

对于想在 JavaScript 中使用类型的人来说，TypeScript 在语法上是 JavaScript 的超集，为其带来了静态类型。如果你喜欢这种东西，就会觉得非常酷。当然，如果你看到了 JavaScript 状态调查的最新结果，你会发现实际上很多人都喜欢。

来自 JavaScript 的状态

我们看看 Brian Terlson 是怎么说的：

作为 2014 年为 JavaScript 提议加入类型的人，我不认为类型会在较短时间内实现。从标准的角度来说，这是一个极其复杂的问题。对于TypeScript 用户来说，采用 TypeScript 标准当然无可非议，不过也有其它一些J avaScript 超集支持类型，它们支持着一些相当重要的用法，比如 Closure Compiler 和 FLow。这些工具的行为各不相同，甚至不清楚它们是否存在一个共同的子集（我不认为有直观的表现）。我不确定类型标准更像哪一个，我和其他人会继续进行相关的调查研究，这可能是有意义的工作，但不要希望在短期内完成 – HashNode AMA with Brian Terlson

将webpack加入到pageage.json配制文件中，使用以下命令：

正文从这开始～

因个人精力有限，暂停简书的维护，欢迎大家关注我的知乎https://www.zhihu.com/people/wei-wei-24-86-36/activities，会持续分享前端、Web开发相关文章

Babel：启用还是关闭

弄明白了吗？Babel 听起来像巴比伦(Babylon)。我都快崩溃了。我并没有试图将 Babel 与 Babylon 联系在一起，但有人说过我们可能会放弃对转译(transpiling)的依赖。在过去几年里，Babel 一直是个大问题，因为我们想要 ECMAScript 提出的所有美好的特性，但又并不想等待浏览器跟上更新。随着 ECMAScript 转向年度小版本发布，浏览器可能会跟上。剔除一些非常棒的 kangax 兼容性图表的 JavaScript 发布是什么样的呢？

这些图表的截图不是很清晰，因为我想展示它们看起来是多么的绿！更多有关详细信息，请单击图像下方的链接以进一步查看图表。

es6 的兼容性

2016+ 的兼容性

在第一张图中，左侧的红色块是编译器（例如es-6 shim，Closure等）和较旧的浏览器（例如Kong 4.14和IE 11）。右边的五个红色列是服务器/编译器PJS、JXA、Node 4、DUK 1.8和DUK 2.2。在较低的图上，看起来像一只狗并且乱七八糟的感叹号的糟糕图形的红色区域是仅使用Node 6.5+具有绿色条纹的服务器/运行时。左边红色方块的构成是编译器/polyfils和IE 11。更重要的是，看看那些绿的！在最流行的浏览器中，我们几乎都是绿色的。2017年功能中的唯一红色标记是Firefox 52 ESR for Shared Memory和Atomics。

从一些角度来看，这里是来自维基百科的一些浏览器使用情况。

好的，关闭Babel可能会有点麻烦，因为当它落实之时，我们希望其能被尽可能多的用户尽可能地访问Babel。想想下我们可能能够摆脱那个额外的步骤，在我们没有使用转译器之时。

创建一个webpack.conf.js，编写wepack的配置文件

如何使用其他人的代码？

关键术语：AMD、commonJS模块、ES6模块、npm、Github

在JavaScript中，代码共享和模块的历史有一点复杂。我强烈建议你阅读Preethi Kasireddy的文章“JavaScript模块入门指南”来了解更多信息。

对于我们而言，术语模块和库基本上是等价的：它们代表大量的自包含代码，我们可以在自己的项目中使用及重用。JavaScript模块一般通过node包管理器npm发布。你可以在npm或GitHub上搜索JavaScript模块。

模块定义（有时称为模块语法）有几种存在竞争关系的方式，主要包括CommonJS、AMD和ES6原生模块。CommonJS采用一种同步的、面向服务器的方法。相反，AMD（异步模块定义）允许你使用异步、非阻塞的方式定义和加载模块。CommonJS和AMD都是在JavaScript没有原生支持任何模块或依赖概念的情况下创建的。

ES6增加了原生JavaScript模块支持，它既支持CommonJS的声明式语法，又支持AMD的异步加载，还有其他一些特性。终于，模块成为现行语言的一部分。

在工作中，你很可能会遇到所有这三种类型的模块。对于新项目，你该应该使用ES6原生模块。构建工具，如webpack（下面会介绍），会帮助你在现有项目中使用各种类型的模块。

React boilerplate

命名为React boilerplate具有您需要的一切，包括Redux和一些漂亮的离线功能，利用web workers技术。

它让开发人员创建所谓的渐进式Web应用程序（Progressive Web Applications，PWA）：离线运行的Web应用程序，使用一种名为Service Worker的技术，请阅读NicolásBevacqua的文章。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

我需要Node.js吗？

关键术语：Node.js、npm、nvm

Node.js是一款编写服务器端JavaScript的工具。等一下，难道我们谈论的不只是前端JavaScript吗？

由于JavaScript模块通常在打包后通过node包管理器npm分享，所以你需要安装Node.js，即使你不会把它用于服务器端开发。在OS X或基于Linux的系统上，最好的方式是通过Node版本管理器nvm，这简化了不同Node.js版本的管理。Windows用户应该看下nvm-windows。

Gulp

Gulp是一个通用的任务运行器，可以用于涉及文件系统的任何类型的自动过程，因此它不是Webpack或Browserify的直接竞争者。

像Grunt一样，Gulp通过聚合工作：你可以要求它缩小和连接资源列表，但是它不会像Webpack或Browserify那样处理模块化JavaScript本身。

然而，它可以很好地与webpack一起工作，即使开发人员倾向于使用npm脚本。

用来处理一些函数和方法（Genertor,Set,Map,Array.from等未被babel处理，需要上面的两个插件）

我如何测试代码？

关键术语：Mocha、Jasmine、Chai、Tape、Karma、Selenium、phantomjs

同许多其他类型的编程一样，前端JavaScript可以从测试中获益。大多数JavaScript开发人员都表示，他们至少会编写部分测试。

JavaScript缺少一种内置的框架用于运行测试，因此，开发人员需要依赖外部库。不同的测试工具致力于问题的不同方面，这点同JavaScript构建系统非常像。

Mocha和Jasmine是两个流行的库，有时候称为测试框架，可以帮助你编写测试。他们的API十分类似；你描述应该出现的行为，然后使用断言测试它。

describe('helloWorld()', function(){
   it('should greet me by name', function(){
        // assertions go here
   }); 
});

Mocha实际上没有内置断言库，因此，大多数开发人员都会将它同Chai结合使用。它们的断言语法类似：

// Jasmine
expect(helloWorld("Bonnie")).toEqual("Hello, Bonnie");

// Chai
expect(helloWorld("Bonnie")).to.equal("Hello, Bonnie");

为了运行测试，Mocha提供了一个命令行工具，而Jasmine没有。许多开发人员使用Karma，这是一个测试执行器，既可以运行Jasmine风格的测试，也可以运行Mocha风格的测试。

那很适合单元测试；对于基于JavaScript的集成测试，我们需要更多工具。在前端领域，集成测试通常涉及使用一个浏览器实际地渲染和加载页面，模拟用户交互，并检查结果。

Selenium是一个Web驱动程序，通常可以用于这些测试。你需要为Selenium配备一个浏览器驱动程序，以便它能够启动浏览器。PhantomJS是一个所谓的无头浏览器——它运行时没有图形用户界面——通常用于测试中。由于它们不需要GUI，所以无头浏览器对自动化测试而言非常有用。你可能会发现Sinon有用；它提供了一个模拟服务器，可以用于模拟AJAX请求的响应。

你还可以设置JavaScript测试同持续集成（CI）系统一起运行，如Jenkins或Travis。

JavaScript测试工具有大量堪称完美的选择。对于新项目，我常常选择Karma和Jasmine，并使用PhantomJS作为测试浏览器，但Mocha

• Chai也是一个不错的选择。

React Native

使用React Native，你可以从相同的代码库使用React开发人员熟悉的概念构建iOS和Android真正的原生移动应用程序。要了解有关构建iOS和Android应用程序的更多信息，请阅读这本教程。

其他基于Cordova的解决方案，依靠WebView来渲染屏幕，并且不如原生解决方案那么高效。 “一次编写，随处运行”，这是开发人员的梦想成真！

2、什么是Webpack

我应该编写JavaScript，还是其他的什么？JavaScript的种类有哪些？

关键术语：ES5、ES6、ES2015、CoffeeScript、TypeScript、ClojureScript、Babel、“转译（transpiling）”、“编译（compiling）”、MDN参考

“JavaScript”实际上并不是一门单独的语言。每个浏览器供应商都实现了自己的JavaScript引擎，由于浏览器和版本之间的差别，JavaScript饱受碎片化之苦。CanIUse.com记录了部分不一致的情况；你也可以查看Mozilla开发者社群里的文档。

ES6又称 ES2015/Harmony/ECMAScript6/ECMAScript 2015，是JavaScript规范的最新版本。它引入了新的语法和功能。胖箭头、ES6类、本地模块和模板字符串都是这个JavaScript版本的一部分。Treehouse提供了一份不错的ES6入门教程。

虽然JavaScript处于一个碎片化的环境，但能够使用新的语言特性也不错。因此，像Babel这样的工具会把你闪亮的标准JavaScript代码转换成一个同旧平台兼容的版本。这个过程称为转译。这同编译没有太大的区别。使用像Babel这样的工具，你不必太过担心特定的浏览器是否支持你使用的JavaScript特性。

转译工具不只是将ES6 JavaScript转换成ES5。还有一些工具可以对JavaScript的变体，如ClojureScript、TypeScript和CoffeeScript，做同样的事情。ClojureScript是Clojure的一个版本，可以编译成JavaScript。TypeScript本质上是JavaScript，但有一个类型系统。CoffeeScript同JavaScript非常像，但有更闪亮的语法；由CoffeeScript创建的许多语法糖都已经被ES6采用，这在很大程度上显得CoffeeScript不那么有用了。所有这些都会编译成普通的JavaScript。

那么你应该使用什么呢？如果你是前端开发的初学者，那么你也许应该编写ES6风格的JavaScript。大部分ES6特性都得到了各浏览器供应商的广泛支持。如果你需要支持相对较老的平台，那么像Babel这样的工具可以替你将ES6编译成兼容ES5的JavaScript。现在先不要考虑闪亮的compile-to-JavaScript选项，如ClojureScript，不过，一旦你有了更多的前端开发经验，那么它们当然值得研究。

Jest

Jest，另一个Facebook项目，在过去的几周里得到了很大的牵引力。它在React社区中是众所周知的，越来越多的人转向Jest（阅读这篇故事来了解），它可能成为2017年最流行的测试框架。

Jest有内置的良好的模拟能力，而其他测试框架通常依赖于像Sinon.JS这样的库。

3、WebPack和Grunt以及Gulp相比有什么特性

如果你以前有编程经验，但是一名前端JavaScript开发的初学者，那么一系列的术语和工具容易引起混淆。我们不会纠缠于细节的讨论，而是会纵览当前的“JavaScript生态圈”。这应该足够你找准方向，开启前端开发之旅。

在2015年，React是社区之王，Redux在与Flux的大战中获胜。那么，谁是2016年的JavaScript的新星？

创建一个html文件运行，引入bundle.js运行，控制台会打印：sum(21, 22) 43 。

Webpack

Webpack是用于构建单页应用程序的主要工具，它与React生态系统一起使用。新发布的版本2带来了一些令人鼓舞的增强功能（查看这份介绍）。

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);

// ==================//
// 编译之后（直接截取了编译的代码）
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
 return item * 2;
}); // 将以前数组每一项*2

console.log(newArr);

Flow

Flow不是一个编译器，它是一个用于“注释”JavaScript代码的静态类型检查器。基本上在代码库中使用Flow意味着添加注释来描述期望的类型（点阅读更多了解使用Flow编写模块）。

它在Facebook项目的代码源内使用。因为Facebook成为开源世界的主要角色之一（像React、React Native、Flux、Immutable、Jest等项目），这意味着很多。

.babelrc文件配置

四. React Boilerplates

Snip20170204_4.png

React是一个伟大的UI库，但使用React和现代Web开发工作流工具需要大量的配置。那么如何开始创建一个应用程序呢？

这是React的“Boilerplates”和其他“Starter Kits”提供的答案：

此时再看package.json文件，对比package.json刚刚创建时，新增加了一段代码。

Express

当你使用node.js构建Web应用程序时，Express通常被视为事实上的Web服务器。它的哲学（一个可以使用中间件包扩展的简约核心）是大多数node.js开发人员熟悉的。

1. 模块化，让我们可以把复杂的程序细化为小的文件;
2. 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
3. Scss，less等CSS预处理器
4. …

以下图表比较了Github在过去12个月中增加的星标数量。JS.ORG分析了bestof.js.org的项目，这是一个与网络平台相关的最佳项目的精选列表。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Nodal

Nodal框架以目标无状态和分布式服务连接到PostgreSQL数据库。

webpack打包的两种方式

前瞻

2017年的模块捆绑包，强调性能：汇总（rollup）。

它使用ES6模块与一个称为树摇动（Tree shaking）功能创建捆绑包，只包括您在代码中使用的功能，而不是搬运完整的库。

其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Next.js

Next.js由Zeit创建，具有可用于创建通用应用程序的服务器端呈现功能（或同构应用程序，如我们在2015年所说），也就是说客户端和服务器端运行的应用程序使用相同代码。

创建app.js, sum.js，sum.js导出一个加法的函数，app.js使用这个函数。

JS.ORG通过比较过去12个月里，在Github上增加的星标数，告诉你2016年的趋势。

您可能感兴趣的文章:

• webpack打包node.js后端项目的方法
• 浅谈webpack打包生成的bundle.js文件过大的问题
• webpack 单独打包指定JS文件的方法
• webpack将js打包后的map文件详解
• webpack打包js文件及部署的实现方法
• webpack打包单页面如何引用的js
• Vue.js中用webpack合并打包多个组件并实现按需加载

Koa

Koa的哲学接近Express，但它是使用ES6生成器，以避免有时被称为回调地狱的问题。

webpack配置

React及其竞争者

React总体排名第二，前端开发者没有谁可以忽略React及其丰富的生态系统。

React如此受欢迎，它激发了很多其他库，旨在采取最好的React，没有臃肿，提高在浏览器的性能和构建时间。

Inferno是这个类别中最受欢迎的项目，它声称是React最快的替代品。

在我们的排名中，紧跟Inferno之后，Preact也是React的一个不错的替代品。它的生态系统是相当成熟的，例如有一个具有离线功能的Bolierplates、路由、Compat模块，以便您可以使用Preact项目中的任何现有React库。

webpack已经安装到计算机上，现在可以使用webpack命令了。

Gatsby

新来的Gatsby是一个非常有趣的解决方案，它从竞争对手脱颖而出，因为它使用React生态系统来生成静态html文件。事实上，您可以组合React组件，Markdown文件和服务器端渲染使它非常强大。

$ npm init

二. 前端框架

Snip20170204_2.png

“前端框架”这一分类可能是2016年JavaScript最累的一个牌行榜，几乎每个月都会出现一个竞争者，但是，这推动了创新的步伐。

确切地说，在这个类别中混合了两种类型的项目：

• 完整的框架包含了所有功能，能够创建一个现代的Web应用程序（路由、数据提取、状态管理）。AngularJS、Angular 2、Ember或Aurelia都属于这一类。

• 更轻量级的解决方案专注于UI层，如React、Vue.JS、Inferno，等等。

我们已经提到了总体排名第一的Vue.JS，让我们看看其他竞争者。

babel的两个插件：Babel Polyfill 和 Babel Runtime Transform

Babel

Babel与Webpack一起，几乎成为编译ES5代码和标准JavaScript中的库（如React（JSX））使用的模板的标准。最初创建用于编译ES6，它成为一个更通用的工具，可以完成任何代码转换，拜一个系统的插件所赐。

在项目中使用webpack

概述

Snip20170204_1.png

通过一年中最热门的10个项目，由此可以很好地了解2016年的Web开发环境，因为您会发现：

• 3个UI框架：Vue.JS、React、Angular 2

• 新的Node.js包管理器：Yarn

• 构建桌面应用程序的领先解决方案：Electron

• 快速启动新的React项目的解决方案：Craste React App

• 移动框架：React Native

• 最著名的CSS工具包：Bootstrap

• 基于函数概念的状态管理库：Redux

• 强大灵活的图表库：D3

以上展现了2016年中，JavaScript表现出了无处不在，功能多样的特性。

在代码实践之前，先说一写webpack的基础知识。

2016 总结

尽管存在JavaScript疲劳™和戏剧（记住“左键门”），但对于社区而言，随着像Vue.JS和React Native项目的兴起，以及像Yarn或Creat React App的新项目，2016年仍然不啻为一个伟大的年份。

我们一直在谈论的项目，2016年在GitHub得到了吸晴，但真正重要的是开发者的满意度。所以，如果你想要一个更定性的方法，上Sacha Greif查看JavaScript调查的结果，它收集了超过9,000的反馈。

---

以下是JS.ORG的年度十大选择，以及JS.ORG的想法：

• Vue.JS：势头强劲，不会停止

• Electron

• Create React App

• React Native

• Gatsby

• Yarn: 一个快速，可靠和安全的依赖管理，可以取代npm，点此处了解Node.js包管理器的状态。

• 渐进式Web应用程序。

• Node.js微服务使用像Now这样的托管解决方案很容易部署。

• Node.js的演变：最新版本对ES6语法提供良好的支持。

• 还有一个选择是GraphQL：据JS.ORG了解，GraphQL将有大动作。

<recommend image="" title="蘑菇街前后端分离实践" link=";

一：创建两个js文件

Angular 1和Angular 2

Angular项目已经拆分为2个存储库，因为Angular 2是Angular 1的完全重写，即使一些概念保持不变。

Angular 2是用TypeScript编写的，并且利用ES6提供一个现代和彻底的框架。

AngularJS项目是1.x的分支，它在许多项目中仍然使用，并将继续流行一段时间。

值得一提的是，Ember虽然拥有庞大的生态系统，但它的社区并不在前十名。

因此看起来，与其选择“开箱即用”的所有功能的完整框架，2016年开发商更倾向轻量级的方案，并喜欢组成自己的方案——“点菜”。

在2016年调味的更轻的方法，并更喜欢组成自己的解决方案“点菜”。

1. webpack entry<entry> output （命令行）
2. webpack -config webpack.conf.js (指定webpack的配置文件)

AVA

AVA，由多产的Sindre Sorhus创建的强调性能（并行测试）和ES6。 AVA的语法接近标准测试框架，如Tape和Node-tap。

九. IDE

Snip20170204_9.png

关于IDE（Integrated Development Environment，集成开发环境），值得一提的是，两个最流行的IDE是使用Web技术开发的开源项目。

使用如下命令在全局安装webpack。

NativeScript

NativeScript旨在实现与React Native相同的目标（使用Web技术构建真正的移动应用程序）。它有两种种风格：NativeScript Core和NativeScript + Angular 2。

1. 在命令行输入：webpack --config webpack.conf.js，发现生成了一个app.dd1c6.js带hash的js文件。将这个js文件引入HTML里面发正常输出：sum(21, 22) 43
2. 配置文件的命名为webpack.config.js，则直接在命令行输入webpack就可以。

Sails

Sails是一个完整的MVC框架，受Ruby on Rails的启发（因此名为Sails！）。它已经存在了很长时间。它可以与任何类型的数据库（SQL或无SQL）良好工作。

webpack配置文件

CoffeeScript

多年来，CoffeeScript由于其精简语法（灵感来自Python和Ruby语法），成为最受欢迎的编译器，但它在2016年不太流行，很多开发人员从CoffeeScript迁移到ES6与Babel。

// 配置文件使用commonjs规范
module.exports = {

  // 入口，是一个对象
  entry: {
    app: './app.js' // 相对路径
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一项是一个规则
    rules:[
      {
        test: /.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
        use: {
          loader: 'babel-loader', // 使用bable-loader来处理
          options: { // 指定参数
            presets: [
              ['babel-preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 version'] //具体可以去babel-preset里面查看
                } 
              }]

            ] // 指定哪些语法编译
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

三. Node.js框架

Snip20170204_3.png

2016年，使用以下解决方案创建和部署node.js应用程序从未如此简单：

• Now

• Webtask.io

• Stdlib

像Gomix这样的项目甚至降低了Node.js世界的门槛，使得任何人都可以在浏览器中轻松点击几下来编写和共享 Node.js代码。

如果你必须构建一个Web应用程序，你会选择哪个框架？

Loopback

Loopback是另一个成熟的框架，内置许多函数，包括使用令牌和到任何类型的数据库的连接器的认证。

它的杀手级功能是API浏览器功能，允许开发人员以直观的方式检查所有API端点，并能检查任何用户的令牌。如果你必须构建一个API，这绝对是一个不错的选择。

app.js里面新增代码

2016年已经过去，2017的工作已经开启，你是否会担心错过一些重要的东西？无须担心，JS.ORG不久前分享了一篇博文：https://risingstars2016.js.org，为大家回顾了去年主要的趋势。

Ionic

Ionic是“混合”应用程序概念的先驱。在后台中，它基于Cordova访问移动设备功能。这是一个非常成熟的大型生态系统。

// app.js

import {sum} from './sum';
console.log('sum(21, 22)', sum(21, 22));

// sum.js
export function sum(a, b) {
  return a + b;
}

视野拓展

QCon是由InfoQ主办的全球顶级技术盛会，每年在伦敦、北京、东京、纽约、圣保罗、上海、旧金山召开。扫描下图二维码，了解更多信息。

QCon北京2017将于4月16日~18日在北京·国家会议中心举行，精心设计了支撑海量业务的互联网架构、大规模网关系统、微服务实践、快速进化的容器生态、智能化运维、互联网广告系统实践、大数据实时计算与流处理和金融科技转型与未来等30来个专题，涵盖架构、大数据、云计算、移动、前端、人工智能等热点领域，将邀请来自Google、Facebook、阿里巴巴、腾讯、百度、美团点评、爱奇艺等典型互联网公司的技术专家，分享技术领域最新成果。敬请期待。

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

Browserify

Browserify由于其简单性，受到了node.js开发人员喜爱。

基本上，它需要几个node.js包作为输入，并为浏览器生成一个单一的“构建”文件作为输出。但是似乎一个更有见地的工具像Webpack是一个更好地适合Web应用程序工作流。

二：使用webpack命令打包

Feathers

Feathers是一个非常灵活的解决方案，创建一个“面向服务”的架构，它是一个很好的适合创建node.js微服务。

安装webpack到项目中

Hexo

在2016年，使用node.js构建的最流行的SSG是Hexo。它是一个彻底的SSG，接近CMS系统，可用于构建一个博客，如Wordpress。它有很多功能，包括国际化插件。

接下来我们简单为大家介绍
Webpack如何将多个js文件合并（注意这里只是文件的合并，即将多个写好的js合成一个js文件，以减少http请求）。

六. Compilers

Snip20170204_6.png

我们在这里谈论生成任何语言（或JavaScript的任何变体）的JavaScript的编译器（或“transpilers”）。它们将代码转换为浏览器（或Node.js）可以执行的“标准JavaScript”代码。

例如，编译器允许开发人员使用最新版本的JavaScript（ES6）编写代码，而无须担心浏览器的支持。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

2016年的王者

Vue.JS项目在去年的GitHub上获得了超过25,000颗星标，将包括React和Angular的其他框架甩在身后，一骑绝尘。

10月发布的Veu.JS的版本2，带来了虚拟DOM的性能。

Vue.JS用于大公司（包括阿里巴巴，中国最大的电子商务公司）的生产，所以你可以认为它是一个安全的选择。

它已经有一个相当成熟的生态系统，包括路由（vue-router）和状态管理库（Vuex）。

看来Vue.JS采用了最好的React（组件方法）和AngularJS（模板是HTML代码增强的框架特性）。

$ npm install --save-dev webpack

前端之巅

「前端之巅」是InfoQ旗下关注前端技术的垂直社群，投稿请发邮件到editors@cn.infoq.com，注明“前端之巅投稿”。

1. 使用npm init生成一个配置文件
2. npm install babel-loader babel-core --save-dev
3. 新建app.js，index.html，webpack.config.js等文件
4. 编写webpack.config.js
5. 安装babel-preset来指定编译的版本：npm install babel-preset-env --save-dev
6. 在app.js里面随便写一些ES6的语法
7. 使用命令行输入webpack进行编译

七. Build Tools

Snip20170204_7.png

在2016年，很难想象一个没有任何构建过程的Web应用程序。通常需要一个构建过程来编译模板和优化资源，以便在生产环境中运行Web应用程序。

安装webpack

十. Static Site Generators

Snip20170204_10.png

静态网站生成器（Static site generators，SSG）是生成一系列HTML、.CSS和JavaScript文件的工具，您可以在任何简单的Web服务器（Apache或NGNX）上部署，而不必大惊小怪，或者设置数据库或任何网络框架。正如Gatsby网站所说：

就像1995年那样建立网站。

静态网站具备快速性、鲁棒性和易维护性。

SSG非常受欢迎，因为有很多很好的解决方案来主持静态网站免费：

• Github pages

• Gitlab pages

• Netlify

• Surge

• Now static

在当前目录下使用： webpack app.js bundle.js ; 这里入口是app.js, 输出文件是bundle.js，这样就会看到文件中多出一个bundle.js文件。

JavaScript社区的发展正如盛壮之时的骐骥，—日而驰千里，趋势如长江后浪推前浪。

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

八. Testing Frameworks

Snip20170204_8.png

最著名的两个测试框架是Jasmine和Mocha，但最近的两个项目在2016年有更多的牵引力：AVA和Jest。

import "babel-polyfill";
let func = () => {};
const num = 30; 
let arr = [3, 4, 5, 6];
let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);
// 需要babel-polyfill
arr.includes(8);

// Genertor 函数
function* func2() {
}

一. 2016年最受欢迎的项目

// 配置文件使用commonjs规范

module.exports = {

  // 入口，是一个对象
  entry: {
    app: './app.js'
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:5].js'
  }
}

五. Mobile

Snip20170204_5.png

JavaScript无处不在，你可以使用技术Web开发人员已知的任何技术（HTML、JavaScript、CSS）构建移动应用程序。

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Visual Studio Code

在我们的结果中，Microsoft凭借Visual Studio Code遥遥领先。

它提供了一个与TypeScript和node.js的很好的集成。一些开发人员提到关于开发速度，很感谢IntelliSense功能（高亮和自动完成的混合）。

在同一句话中提到“开源”和“微软”不再矛盾了！

1. Babel Polyfill（全局垫片），npm install babel-polyfill --save, 使用：import "babel-polyfill";
2. Babel Runtime Transform（为开发框架准备），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save
3. 新建一个.babelrc来进行配置

Create React App

Facebook通过提供一个称为Create React App的轻量级方法来解决这个需求，这是一个非常方便的启动一个新的React项目。

Dan Abramov（Redux的创造者，现在为Facebook工作）做了一个伟大的工作，在简单性和功能找到了正确的平衡点。例如，没有花哨的样式解决方案（只是简单的CSS），没有服务器端渲染，但是所有的一切，都很好地打包了，开发人员的体验非常棒。

与其竞争者的主要区别是，如果使用Create React App，它将成为项目的依赖项，所有的魔法是隐藏的，你看到的只是你的应用程序代码。您可以随时升级依赖关系，它并非只是一个起点。

在项目根目录安装bable-loader和babel-core，babel-preset

使用webapck的配置文件打包（还是上面的两个js文件）

webapck配合babel打包ES6、7

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

{
  "presets": [
    ["babel-preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 version"]
      } 
    }] 
  ],
  "plugins": ["transform-runtime"]
}

使用命令行打包js

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。

本文由9159.com发布于前端,转载请注明出处：   译文出处，昨天的文章可能带给你的是一些

关键词：