npm scripts : 每个前端开发都应知道的一些使用提示

npm 不仅是 JavaScript 的包管理工具,它还可以用于你代码库相关的配置工具,如 Linters(代码检查工具)、transpilers(代码转译工具)、testing(测试工具)和servers(本地服务器)等。这些都可以根据软件包的说明进行配置并运行。基本用法也很简单。

你可以在 package.json 主对象中的 scripts 属性中指定 scripts ,然后使用 npm run 运行 scripts。

例如:

{
  ...
  "scripts": {
    "build": "webpack --progress",
    "test": "karma start",
    "server": "webpack-dev-server"  
  }  
  ...
}

然而,在执行你的配置时,有些细节可能会很有用。 继续阅读

Webpack 和 Rollup :一样但又不同

4月初,Facebook 将一个 巨大的 pull 请求 合并到了 React 主分支(master) 中,将其现有的构建流程替换为基于 Rollup ,这一举动 促使 一些人发很疑惑 “你为什么选择 Rollup 而抛弃 webpack ”?

这是一个完全合理的问题。Webpack 是现代 JavaScript 社区最成功的故事之一,每月有数百万的下载量,为成千上万的网站和应用提供支持。它有一个庞大的生态系统,许多贡献者,而且作为一个社区开源项目,还有一个 有意义的财务支持

相比之下,Rollup 并不起眼。但 React 并不孤单 – Vue,Ember,Preact,D3,Three.js,Moment 以及其他许多知名的库也使用 Rollup 。世界到底怎么了?为什么我们不能只有一个大众认可的 JavaScript 模块化打包工具? 继续阅读

JavaScript 模块简史

你是否是 JavaScript 新手?并且对模块,模块加载器和模块打包器感到困惑吗?或者你已经编写了一段时间的 JavaScript ,但是没法掌握模块的一些术语?你是否听过 CommonJS、AMD、Browserify、SystemJS、Webpack、JSPM 等等术语,但是不理解我们为什么需要它们?

我会试着解释他们是什么,他们试图解决什么问题,以及他们如何解决这个问题。 继续阅读

我为什么使用 JavaScript Standard Style(JavaScript 标准编码风格),而且你应该使用

让我们看一看 @feross 的 JavaScript 标准风格 ,这是一个流行的 JavaScript 风格指南。它可以帮助你减少团队之间的摩擦,增加程序员的幸福感。

这是 一组规则 ,可以使 JavaScript 代码更加一致 ,并且可以防止类似于 tabs缩进 和 空格缩进优缺点这一类无聊的话题讨论。你可以采用多种风格之一,并且与其他 (如 JSLintJSHintESLint )是同一种类型的 JavaScript 检测器。

如果你还不知道什么是linter (检查工具),或者为什么需要,请查看我们对 JavaScript 检查(Linting)工具的比较

风格的重要性

如果你已经从事编码工作有一段时间了的话,那你肯定会有一种自己喜欢的风格。当你成百上千次以特定的模式编写代码时,你会发现你的编码方式是令人愉悦的。突然间来了个人,开始把挂在行尾的大括号单起一行。你可能会发牢骚。深呼吸冷静思考一下,你放置括号的位置 或 关键字后加空格 不会让你的程序更加正确,这只是个人喜好。 继续阅读

2017年最值得学习的前端框架和技术

JavaScript 的普及造就了一个非常活跃的技术,框架和库的生态系统。 这个生态系统不断涌现多式多样的框架和技术,对许多人来说都是高度的混乱。 那么你应该关注什么样的技术呢?

你应该在哪里方面投入时间来获得最大收益呢? 目前公司招聘哪些技术栈呢? 哪些技术增长潜力最大呢?

现在最重要的技术是什么?这篇文章高度概括了你需要知道的内容,你可以通过文章中的链接了解所有关于它的一些信息。

记住,当你在学习一些实际的代码时,您可以在 Codepen.io 上交互式地执行代码。如果你还在学习 ES6 ,您可以看看如何使用 Babel REPL 进行转译。 继续阅读

2017年最佳JavaScript框架,库和工具

JavaScript框架,库和工具似乎比他们的开发人员多出很多。截至2017年5月,在 GitHub 上快速搜索 JavaScript 项目显示已经超过110万个。npmjs.org 有 50 万个可用的软件包,每月下载量近100亿次。

2017.05.29:该文章已更新,以反映 JavaScript 生态的当前状态。

本文将努力解释最流行的客户端 JavaScript 框架、库和工具之间的基本内容和差异。他们对你来说是否是 “最好的” 选择是另一个问题。选择一些东西,坚持一段时间。你需要知道的是:你最喜欢的选项终将被“更好”的东西取代,无论你选择什么! 继续阅读

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢使用 Gulp , npm 和 jQuery ?如果是这样,根据 Ashley Nolan 的前端问卷调查,你是一个典型的前端开发工程师。

谎言,该死的谎言,统计数字和调查问卷

愚人码头注:谎言,该死的谎言,统计数字(英文:Lies, damned lies, and statistics),是一句著名的西方谚语。主要描述数字的说服能力,特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告,以及人们倾向于贬低那些不支持其立场的统计结论。 维基百科

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时,本次问卷调查收到了5,254份答复,这是比大多数民意调查更具有样本价值。但是,调研结果是否代表真相还是应该抱审慎态度。。。

全球性的统计结果

这次问卷调查是全球性的,但将主要来自英语国家。 在其他地方开发或使用的流行工具可能被忽略。 继续阅读

为什么使用 npm Scripts 构建项目

小编推荐导语
以下是特约作者Damon Bauer的帖子。已经有越来越多的观点(例如)认为直接使用 node packages,与他们提供的命令行界面,是一个好的路线。反之,将功能抽象到任务运行器后台运行已经越来越不被看好。在一定程度是,你无论如何都要使用npm,而同时npm提供了脚本功能,为什么不用呢?但使用npm的脚本功能的原因有很多。Damon会帮我们理解这样做的原因,并确切的告诉我们如何通过这种方式来完成前端构建过程中的大部分重要任务。

在过去的大概六个月里,我已经开始在我的项目中使用 npm scripts 。在此之前,我使用Gulp,再之前是Grunt。他们给了我很好的功能,通过自动化帮助我做了许多原先需要我手工做的事情,并且更快更有效地执行我的工作。但是我却开始觉得我在这些工具上花费的精力要比花在我自己代码上的精力多得多。 继续阅读

webpack 2 入门

webpack 2将在文档完成后将正式发布(webpack 2.2 中文文档)。 但这并不意味着你现在不能开始使用版本2,如果你知道如何配置它的话。

webpack 2.2 已经正式发布! 现在通过 npm 安装 webpack 会自动安装 v2 版本。

什么是 webpack ?

简单来说,webpack 是一个针对 JavaScript 代码的模块打包工具。然而,自从它的发布,它逐渐发展成为所有前端代码的管理工具(不管是其本身有意还是社区的意愿)。 继续阅读