FEEL FREE TO SHARE TUTORIALS, YOUR SKILS & KNOWLEDGE ON CODING, SCRIPTS, THEMES, PLUGINS OR ANY RESOURCES YOU HAVE WITH THE COMMUNITY- Click Here To Post Your Request,
JOIN COMPUTER REPAIR FORUM

Reply to thread

Message: <blockquote data-quote="codeguru" data-source="post: 53" data-attributes="member: 2"><img src="https://cdn-images-1.medium.com/max/1600/1*xArsbAlIa6VmtK0u-VuxTA.png" alt="Mozilla Neutrino" class="fr-fic fr-dii fr-draggable " style="" />Utilize tooling that harnesses the power of Webpack with ease of simple presets to quickly start JavaScript projects, all without upfront configuration.Taking the plunge into starting a new JS project often brings along a significant effort into preparing your environment prior to starting development on the project. Many developers have a preference for using cutting-edge features and modern tooling workflows to make the process enjoyable. Unfortunately, this approach can often have quite a bit of learning curve as people spend time researching best practices, following complex configuration tutorials, and experimenting with boilerplates. What if we could take the work that the community has put into configuring their own projects, and capture that into shareable packages that anyone can use? This is why we created Neutrino.<a href="https://neutrino.js.org" target="_blank">Neutrino</a> is a tool that combines the build and configuration power of Webpack and bolts on the capability to build JavaScript-based projects with presets. A preset is the fundamental building block of Neutrino. With it you can supplement a project with a number of features including how it is compiled, ensuring code quality, and even quickly add testing. By breaking up configuration into composable units we can foster an ecosystem where customizing a project becomes plug and play.To get an idea of how easy it is to get started with Neutrino, I’ll walk through creating a couple simple projects.Note: In the upcoming examples I am using the <a href="https://yarnpkg.com" target="_blank">Yarn package manager</a> for installing dependencies and creating scripts. This is only my personal preference, and you are free to use the npm client if you desire.<h3>Node.js Quickstart</h3>To get started with our first Neutrino-based Node.js project, we are going to be using <a href="https://www.npmjs.com/package/neutrino-preset-node" target="_blank">neutrino-preset-node</a>. According to its documentation it enables:<ul> <li data-xf-list-type="ul">No upfront configuration, and easy overrides if necessary</li> <li data-xf-list-type="ul">Compiles to support Node.js v6.9+, ES Modules, Async Functions</li> <li data-xf-list-type="ul">Auto-wired sourcemaps</li> </ul>Cool, let’s get started!First up, we need a directory to start working from. From your terminal, create a new directory and change into it. Then we are going to install [ICODE]neutrino[/ICODE] and [ICODE]neutrino-preset-node[/ICODE] as development dependencies.❯ mkdir project && cd project❯ yarn add --dev neutrino neutrino-preset-nodeBy default the Node.js preset looks for source code in a [ICODE]src[/ICODE] directory, with the main entry point being [ICODE]index.js[/ICODE]. Let’s create this file and edit it, just with a simple HTTP server that echoes whatever we send to it.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}`));Next, let’s add a couple scripts to our package.json which will give us some easy commands to start and build our app:{  "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"  }}We are ready to start our app! Using [ICODE]yarn serve[/ICODE] in one terminal, and [ICODE]curl[/ICODE] in another, we can see our code in action:❯ yarn serveWarning: 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 <a href="http://localhost:3000/Hello\" target="_blank">http://localhost:3000/Hello\</a>! Hello!Yep. That’s it.No upfront cost needed to start your project with a completely modern toolchain.<h3>React Quickstart</h3>For fun, let’s just change this project from Node.js to React. According to the <a href="https://neutrino.js.org/presets/neutrino-preset-react/" target="_blank">Neutrino documentation,</a> the React preset features:<ul> <li data-xf-list-type="ul">JSX syntax, ES Modules, support for last 2 browser versions, and Async Functions</li> <li data-xf-list-type="ul">Support for import CSS, HTML, images, fonts, and icons directly from JavaScript</li> <li data-xf-list-type="ul">Hot module replacement, no HTML templating, and much more</li> </ul>Let’s swap presets and install some React dependencies.❯ yarn remove neutrino-preset-node && yarn add --dev neutrino-preset-react❯ yarn add react react-domOur package.json commands need to be changed to use the React preset now:{  "scripts": {    "start": "neutrino start --presets neutrino-preset-react",    "build": "neutrino build --presets neutrino-preset-react"  },}Instead of creating a Node.js server, let’s render some content to a web app. By convention our preset allows us to mount our application at ID “root”:import React from 'react';import { render } from 'react-dom';render((  <main>    <h1>Hello! <img src="https://s.w.org/images/core/emoji/11/72x72/1f60e.png" alt="😎" class="fr-fic fr-dii fr-draggable " style="" /></h1>  </main>), document.getElementById('root'));Back to the terminal, and we can start up our app, and load it up in the browser:❯ yarn start✔ Development server running on: <a href="http://localhost:5000" target="_blank">http://localhost:5000</a> ✔ Build completed <img src="https://cdn-images-1.medium.com/max/1600/1*sQzz8Rbn90uCFqZDkD9lWA.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />Hopefully that demonstrates how simple it is to get up and running with a new React project! If you aren’t working with React for your web project, consider using [ICODE]neutrino-preset-web[/ICODE] for other libraries or generic web applications.<h3>Multiple presets</h3>Neutrino makes it simple to compose multiple presets together. To demonstrate, let’s add a linting preset which will conform our project to the <a href="https://github.com/airbnb/javascript" target="_blank">Airbnb style guide</a>. Install [ICODE]neutrino-preset-airbnb-base[/ICODE]:❯ yarn add --dev neutrino-preset-airbnb-baseTo reduce some repetition, we are going to take advantage of a Neutrino feature which will pull from an array of presets in our package.json. This saves us from having to name all the presets we want to use for every command. Remove the presets from the script commands and move them to [ICODE]config.presets[/ICODE].{  "config": {    "presets": [      "neutrino-preset-airbnb-base",      "neutrino-preset-react"    ]  },  "scripts": {    "start": "neutrino start",    "build": "neutrino build"  }}Note: [ICODE]neutrino-preset-airbnb-base[/ICODE] needs to be loaded before our React preset <a href="https://neutrino.js.org/presets/neutrino-preset-airbnb-base/" target="_blank">according to the documentation</a>.If we modify our code and introduce something in violation of the preset, we are clearly notified in the console:❯ yarn start✔ Development server running on: <a href="http://localhost:5000" target="_blank">http://localhost:5000</a> ✔ 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)<h4>Testing, too!</h4>Let’s quickly add a simple Jest test, because why not? The <a href="https://neutrino.js.org/presets/neutrino-preset-jest/" target="_blank">Neutrino preset </a>[ICODE][URL='https://neutrino.js.org/presets/neutrino-preset-jest/']neutrino-preset-jest[/URL][/ICODE] uses a convention of a [ICODE]test[/ICODE] directory, with some expectations on file extensions:❯ yarn add --dev neutrino-preset-jest❯ mkdir test && touch test/add.test.js❯ touch src/add.jsLet’s write a quick test which verifies a function correctly performs simple addition, which we will shortly create:import add from '../src/add';describe('addition', () => {  it('adds 2 numbers', () => {    expect(add(3, 5)).toBe(8);  });});Now our addition module in [ICODE]src/add.js[/ICODE]:export default (x, y) => x + y;Edit the package.json once more, adding the Jest preset to our list, along with a command to run tests:{  "config": {    "presets": [      "neutrino-preset-airbnb-base",      "neutrino-preset-react",      "neutrino-preset-jest"    ]  },  "scripts": {    "start": "neutrino start",    "build": "neutrino build",    "test": "neutrino test"  }}Let’s run the test!❯ yarn testPASS 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. If we had made a mistake writing our addition module and accidentally used multiplication:export default (x, y) => x * y;This would have caused the test to fail:❯ yarn testFAIL 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.<h3>Modifying the build</h3>One of the great features of Neutrino is that you don’t have to trade simplicity for lock-in or lack of extensibility. By following the <a href="https://neutrino.js.org/customization/" target="_blank">documentation</a> you can supplement your project build process with additional features that don’t come with your preset. If you find you use these features or changes across multiple projects, you can roll that into your <a href="https://neutrino.js.org/creating-presets.html" target="_blank">own preset</a>, and share it with your team and the community!<h3>Conclusion</h3>Making Neutrino into the tool it is today has been a lot of hard work, but we hope you enjoy it. Try it in your projects, give feedback, create your own presets, and share with others. We want to see everyone be successful with Neutrino.If you would like to get involved with development or documentation, please visit the contributing section of the docs for complete details, or visit our GitHub repo.Neutrino Documentation: <a href="https://neutrino.js.org/" target="_blank">https://neutrino.js.org/</a>Neutrino GitHub: <a href="https://github.com/mozilla-neutrino/neutrino-dev" target="_blank">https://github.com/mozilla-neutrino/neutrino-dev</a>Thanks! Eli Perelman & Hassan Ali — MozillaThe post <a href="https://davidwalsh.name/neutrino" target="_blank">Modern JavaScript Apps with Neutrino</a> appeared first on <a href="https://davidwalsh.name" target="_blank">David Walsh Blog</a>.<a href="https://tkjs.us/dwb" target="_blank"><img src="https://davidwalsh.name/demo/tjs_block-1.svg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a><a href="https://davidwalsh.name/neutrino" target="_blank">Continue reading...</a></blockquote>

Verification

Richest Freecoded User

Most Freecoin

freecoded

4,838 Freecoin

Davy200

590 Freecoin

Johnhendrick

575 Freecoin

Smith16

527 Freecoin

nathan69

426 Freecoin

Laureine

415 Freecoin

anajeen

370 Freecoin

codeguru

287 Freecoin

Tekera

267 Freecoin

Akubay

170 Freecoin