利用可利用Webpack功能的工具以及简单的简单预设来快速启动JavaScript项目，而无需进行前期配置。
投入大量精力开始新的JS项目通常会花费大量精力来准备环境，然后再开始对该项目进行开发。 许多开发人员偏爱使用最先进的功能和现代的工具工作流程来使过程变得愉快。 不幸的是，随着人们花时间研究最佳实践，遵循复杂的配置教程并尝试样板，这种方法通常会有很多学习曲线。 如果我们可以将社区投入的工作用于配置自己的项目，并将其捕获到任何人都可以使用的可共享软件包中，该怎么办？ 这就是我们创建Neutrino的原因。
Neutrino是一种工具，结合了Webpack的构建和配置功能以及螺栓的功能，可以使用预设构建基于JavaScript的项目。 预设是Neutrino的基本构建块。 有了它，您可以为项目补充许多功能，包括如何编译，确保代码质量，甚至快速添加测试。 通过将配置分解为可组合的单元，我们可以构建一个生态系统，使定制项目成为即插即用的过程。
为了了解Neutrino入门的难易程度，我将逐步创建一些简单的项目。
注意：在接下来的示例中，我将使用 Yarn包管理器 来安装依赖项并创建脚本。 这只是我个人的喜好，如果需要，您可以自由使用npm客户端。
Node.js快速入门
等一下，您可以使用Neutrino来构建Node.js应用程序吗？
为了开始我们的第一个基于Neutrino的Node.js项目，我们将使用neutrino-preset-node 。 根据其文档，它可以：
- 没有前期配置，必要时可以轻松覆盖
- 编译以支持Node.js v6.9 +，ES模块，异步功能
- 自动连线的原始图
酷，让我们开始吧！
首先，我们需要一个目录来开始工作。 在您的终端上，创建一个新目录并将其更改。 然后我们将安装neutrino和neutrino-preset-node作为开发依赖项。
❯ mkdir project && cd project
❯ yarn add --dev neutrino neutrino-preset-node 默认情况下，Node.js预设在src目录中查找源代码，主要入口点是index.js 。 让我们使用一个简单的HTTP服务器来创建并编辑该文件，该服务器将回显我们发送给它的所有内容。
import { createServer } from 'http';
const port = process.env.PORT || 3000;
createServer(({ url }, response) => {
console.log(`Received message at ${url}`);
response.end(url.slice(1));
})
.listen(port, () => console.log(`Running on :${port}`));接下来，让我们在package.json中添加几个脚本，这将为我们提供一些简单的命令来启动和构建我们的应用程序：
{
"scripts": {
"start": "neutrino start --presets neutrino-preset-node",
"build": "neutrino build --presets neutrino-preset-node",
"serve": "yarn start && node build"
},
"devDependencies": {
"neutrino": "^4.0.1",
"neutrino-preset-node": "^4.0.1"
}
} 我们准备启动我们的应用程序！ 在一个终端中使用yarn serve在另一个终端中curl ，我们可以看到我们的代码正在运行：
❯ yarn serve
Warning: This preset does not support watch compilation. Falling back to a one-time build.
Hash: 8fa3faf9cbe8ca235884
Version: webpack 2.2.1
Time: 632ms
Asset Size Chunks Chunk Names
index.js 3.6 kB 0 [emitted] index
index.js.map 3.53 kB 0 [emitted] index
Running on :3000
---
❯ curl http://localhost:3000/Hello\!
Hello!而已？！
是的 而已。
无需使用完全现代化的工具链即可开始项目的前期费用。
React快速入门
好吧，我承认这很简单。 但是可以肯定的是，像React这样的复杂环境还需要更多，对吧？
为了好玩，让我们将这个项目从Node.js更改为React。 根据Neutrino文档， React预设具有以下特点：
- JSX语法，ES模块，对最近2个浏览器版本的支持以及异步函数
- 支持直接从JavaScript导入CSS，HTML，图像，字体和图标
- 热模块更换，无HTML模板等等
让我们交换预设并安装一些React依赖项。
❯ yarn remove neutrino-preset-node && yarn add --dev neutrino-preset-react
❯ yarn add react react-dom我们的package.json命令需要更改为现在使用React预设：
{
"scripts": {
"start": "neutrino start --presets neutrino-preset-react",
"build": "neutrino build --presets neutrino-preset-react"
},
}让我们向Web应用程序呈现一些内容，而不是创建Node.js服务器。 按照约定，我们的预设允许我们将应用程序挂载在ID为“ root”的位置：
import React from 'react';
import { render } from 'react-dom';
render((
Hello!
), document.getElementById('root'));回到终端，我们可以启动我们的应用程序，并将其加载到浏览器中：
❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed 希望这证明了启动和运行新的React项目是多么简单！ 如果您不为Web项目使用React，请考虑将neutrino-preset-web用于其他库或常规Web应用程序。
多个预设
Neutrino使组合多个预设变得简单。 为了演示，让我们添加一个棉绒预设，使我们的项目符合Airbnb风格指南 。 安装neutrino-preset-airbnb-base ：
❯ yarn add --dev neutrino-preset-airbnb-base 为了减少重复，我们将利用Neutrino功能，该功能将从package.json中的一系列预设中提取。 这使我们不必命名每个命令要使用的所有预设。 从脚本命令中删除预设，并将其移动到config.presets 。
{
"config": {
"presets": [
"neutrino-preset-airbnb-base",
"neutrino-preset-react"
]
},
"scripts": {
"start": "neutrino start",
"build": "neutrino build"
}
} 注意： 根据文档，需要在我们的React预设之前加载neutrino-preset-airbnb-base 。
如果我们修改代码并引入了一些违反预设的内容，则会在控制台中清楚地通知我们：
❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed
ERROR in ./src/index.js
/node-project/src/index.js
6:10 error Strings must use singlequote quotes
✖ 1 problem (1 error, 0 warnings)我开始在这里感觉到一种模式…
也测试！
让我们快速添加一个简单的Jest测试，因为为什么不呢？ Neutrino预设 neutrino-preset-jest使用test目录的约定，并对文件扩展名有所期望：
❯ yarn add --dev neutrino-preset-jest
❯ mkdir test && touch test/add.test.js
❯ touch src/add.js让我们编写一个快速测试，以验证一个函数正确执行了简单的加法运算，我们将很快创建它：
import add from '../src/add';
describe('addition', () => {
it('adds 2 numbers', () => {
expect(add(3, 5)).toBe(8);
});
}); 现在我们在src/add.js添加模块：
export default (x, y) => x + y;再次编辑package.json，将Jest预设添加到我们的列表中，并附带运行测试的命令：
{
"config": {
"presets": [
"neutrino-preset-airbnb-base",
"neutrino-preset-react",
"neutrino-preset-jest"
]
},
"scripts": {
"start": "neutrino start",
"build": "neutrino build",
"test": "neutrino test"
}
}让我们运行测试！
❯ yarn test
PASS test/add.test.js
addition
✓ adds 2 numbers (3ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.228s
Ran all test suites.如果我们在编写加法模块时出错，并且不小心使用了乘法：
export default (x, y) => x * y;这会导致测试失败：
❯ yarn test
FAIL test/add.test.js
● addition › adds 2 numbers
expect(received).toBe(expected)
Expected value to be (using ===):
8
Received:
15
at Object. (test/add.test.js:5:38)
at process._tickCallback (internal/process/next_tick.js:103:7)
addition
✕ adds 2 numbers (5ms)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 1.221s
Ran all test suites. 修改构建
Neutrino的一大特色是您不必为了锁定或缺乏可扩展性而以简单性为代价。 通过遵循文档，您可以为您的项目构建过程补充预置所没有的其他功能。 如果发现您在多个项目中使用了这些功能或更改，则可以将其滚动到自己的预设中 ，并与您的团队和社区共享！
结论
要使Neutrino成为今天的工具，需要付出很多辛苦的努力，但我们希望您喜欢它。 在您的项目中进行尝试，提供反馈，创建自己的预设并与他人共享。 我们希望看到每个人都可以在Neutrino上取得成功。
如果您想参与开发或文档，请访问文档的贡献部分以获取完整的详细信息，或访问我们的GitHub存储库。
Neutrino文档： https : //neutrino.js.org/
Neutrino GitHub： https : //github.com/mozilla-neutrino/neutrino-dev
谢谢！
Eli Perelman和Hassan Ali — Mozilla
翻译自: https://davidwalsh.name/neutrino