作者：Neutrino 是一款工具，它将现代 JavaScript 工具链的最佳部分与零配置的易用性结合在一起。开始 JavaScript 开发的冒险可能很令人生畏。
使用最新的工具和尖端的库很有趣，但通常在坐下来编写应用程序之前会产生大量的设置开销。面对分析瘫痪是一种常见的威胁，完成全面工具管道所需的时间导致了诸如“JavaScript 疲劳”之类的污名。Neutrino 的构建是为了让你快速上手。
Neutrino 将 Webpack 的强大功能与预设的简单性相结合，用于构建 Web 和 Node.js 项目。通过将 Webpack 配置的常见用例封装到可共享的预设中，可以创建应用程序而无需接触任何配置文件。目前，有可用于创建 Web 应用程序、React 应用程序甚至 Node.js 应用程序的预设。添加测试或代码风格检查也只需要一个预设。让我们看看如何快速启动一个 React 应用程序。
React 快速入门
在本指南中，我将使用 Yarn 客户端 来处理依赖项和运行命令。这仅仅是个人喜好；你也可以使用 npm 客户端，如果你愿意。
首先，我们需要一个空间来创建我们的 React 应用程序。在你的终端中，创建一个新目录并进入它
❯ mkdir hacks-react
❯ cd hacks-react
接下来，让我们添加 Neutrino 和用于构建应用程序的 React 预设，以及一些用于实际使用 React 进行开发的其他依赖项
❯ yarn add --dev neutrino neutrino-preset-react
❯ yarn add react react-dom
React 预设有一些约定
- 源代码位于
src中 - 应用程序的入口点是
src/index.js - 你可以将应用程序挂载到 ID 为“root”的元素上
让我们在 src/index.js 中创建入口文件，使用一些简单的内容进行编辑，并渲染它
import React from 'react';
import { render } from 'react-dom';
render(<h1>Hacks: React!</h1>, document.getElementById('root'));
为了运行我们的预览应用程序并构建它，请在你的 package.json 中添加几个脚本
{
"scripts": {
"start": "neutrino start --presets neutrino-preset-react",
"build": "neutrino build --presets neutrino-preset-react"
},
"devDependencies": {
"neutrino": "^4.0.0",
"neutrino-preset-react": "^4.0.0"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-hot-loader": "next"
}
}
运行命令在你的控制台中启动它，并打开给定的 URL
❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed
不到 5 分钟，我们就有了 React 应用程序的工作起点！更重要的是，我们的 Neutrino 预设开箱即用，包含了相当多的功能
- 无需任何配置即可开始开发和构建 React Web 应用程序。
- 现代 Babel 编译，添加 JSX、ES 模块、最近 2 个主要浏览器版本、异步函数以及对象剩余展开语法。
- 支持 React 热加载器和热模块替换。
- 扩展自
neutrino-preset-web。 - Webpack 加载器，用于直接从 JavaScript 导入 HTML、CSS、图像、图标和字体。
- 开发期间的 Webpack Dev Server。
- 自动创建静态 HTML 页面，无需模板。
- 使用 Babili 压缩 和轻松的代码拆分，进行生产优化后的捆绑包。
- 易于扩展以根据需要自定义你的项目，无需黑盒或弹出。
代码质量
添加代码风格检查同样容易。让我们以 Airbnb 风格指南 为例。通过添加 Airbnb 预设，我们可以根据 Airbnb 风格指南检查我们的源代码
❯ yarn add --dev neutrino-preset-airbnb-base
现在让我们将我们的预设添加到我们的 Neutrino 命令中，但让我们将其移动到“presets”中，而不是“scripts”，这样它就不会那么笨拙，而且我们可以减少重复。此外，Airbnb 预设需要在我们的构建预设之前加载
{
"config": {
"presets": [
"neutrino-preset-airbnb-base",
"neutrino-preset-react"
]
},
"scripts": {
"start": "neutrino start",
"build": "neutrino build"
}
}
如果我们再次启动应用程序，但这次引入了一些违反 Airbnb 风格指南的内容，我们可以在控制台中看到问题
❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed
ERROR in ./src/index.js
/Users/eli/code/hacks-react/src/index.js
5:13 error Strings must use singlequote quotes
✖ 1 problem (1 error, 0 warnings)
保持你的代码质量高就像添加预设和遵循约定一样简单。你可以遵循相同的指南将测试添加到项目中。只需选择一个测试预设，你就可以开始了。
强大的力量...
可能有一天，构建过程中的某些内容需要更改以支持你的特定用例。幸运的是，自定义和覆盖构建过程非常简单。Neutrino 不会强迫你在需要更改时维护整个构建配置，也不会将所有依赖项弹出到你的项目中。每个 Neutrino 预设都有明确定义的机制，可以使用最少但直观的 API 增强构建。创建你自己的预设也是统一多个项目中的配置并减少重复常见更改的好方法。只需发布到 npm 或 GitHub，添加为另一个依赖项，然后继续开发。
我们的动机
我们创建 Neutrino 是为了解决我们在 Mozilla 发布和生产组织内部的多个团队中创建前端应用程序时遇到的问题。Neutrino 目前被多个 Mozilla 项目使用，包括 TaskCluster、Treeherder 和统一日志查看器。我们维护和支持 Neutrino，因为它是我们自己需要的和使用的，我们希望所有使用它的人也能从中受益。
继续前进，创造吧
通过将强大的工具整合在一起，Neutrino 及其预设为快速开发创造了一个环境，同时消除了编写应用程序过程中的一些障碍。我鼓励你阅读全面的 Neutrino 文档 并在你的下一个项目中尝试使用它。所有源代码均采用 MPL v2 许可，可在 GitHub 上获取。尽情享受吧！
14 条评论