Modern JavaScript Apps with Neutrino

Node.js Quickstart

Wait, you can use Neutrino to build Node.js apps?

为了启动我们的第一个基于Netrino的Node.js项目,我们将使用。 根据它的文件,它能够:

❯ mkdir project && cd project
❯ yarn add --dev neutrino neutrino-preset-node

import { createServer } from  http ;

const port = process.env.PORT || 3000;

createServer(({ url }, response) => {
  console.log(`Received message at ${url}`);
  response.end(url.spce(1));
})
.psten(port, () => console.log(`Running on :${port}`));

{
  "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
Warning: This preset does not support watch compilation. Falpng 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!

幸运的是,让该项目从Node.js变为React。 http://neutrino.js.org/presets/neutrino-preset-react/。 Neutrino documentation,. React preset characteristics:

JSX syntax, ES Modules, support for last 2 browser versions, and Async Functions

Support for import CSS, HTML, images, fonts, and icons directly from JavaScript

Hot module replacement, no HTML templating, and much more

让我们打上车牌,安装一些反应堆。

❯ yarn remove neutrino-preset-node && yarn add --dev neutrino-preset-react
❯ yarn add react react-dom

我们的一揽子计划。 json的指挥需要改变,现在使用React preset:

{
  "scripts": {
    "start": "neutrino start --presets neutrino-preset-react",
    "build": "neutrino build --presets neutrino-preset-react"
  },
}

不要创建Node.js服务器,而是让网站浏览某些内容。 通过公约,我们的序号使我们得以在国际发展学会“名册”上提出申请:

import React from  react ;
import { render } from  react-dom ;

render((
  <main>
    <h1>Hello! ?</h1>
  </main>
), document.getElementById( root ));

回到终点站,我们可以开始装上电灯,装上浏览器:

❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed

希望能证明,新恢复项目的实施和运行是多么简单! 如果你没有为你的网络项目工作,则考虑在其他图书馆或一般网络应用中使用<代码>neutrino-preset-web。

Multiple presets

Neutrino简单地将多个预案合并起来。 为了证明这一点,请添加一条灯塔,使项目与。

❯ yarn add --dev neutrino-preset-airbnb-base

{
  "config": {
    "presets": [
      "neutrino-preset-airbnb-base",
      "neutrino-preset-react"
    ]
  },
  "scripts": {
    "start": "neutrino start",
    "build": "neutrino build"
  }
}

注:neutrino-preset-airbnb-base 需装到我们的React preset 。

❯ 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测试,因为为什么不? https://neutrino.js.org/presets/neutrino-preset-jest/ Neutrino preset https://neutrino.js.org/presets/neutrino-preset-jest/>neutrino-preset-jest 采用<代码>测试目录公约,对档案延期有一些期望:

❯ 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);
  });
});

现在我们在<编码>上添加模块。

export default (x, y) => x + y;

宣传一揽子计划。 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.<anonymous> (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.

Modifying the build

Neutrino的伟大特征之一是,你不必为lock锁或缺乏便捷性进行简单交易。 http://neutrino.js.org/customization/“documentation。 您可以补充您的项目建设进程,并附加一些特点,而这些特点并没有达到您的初衷。 如果你发现你使用这些特点或多种项目的变化,你可以将其推广到,并提交给你的团队和社区!

Neutrino Documentation: https://neutrino.js.org/

https://github.com/mozilla-neutrino-dev>

谢!

About Ep Perelman

Ep Perelman是Java和Node.js ObsessionistTM,目前正在使用网络工具,为Catherine Release &生产力小组工作。 他的闲.时间从事开放源的工作,并试验电子音乐生产。 Child of the 90s web. Skeptic.

<<<><><>