@factorial/frontend-stack-core

Factorial frontend stack core

@factorial/frontend-stack-core is Neutrino middleware for building CSS and JS files.

Features

• Build CSS files using our standard PostCSS plugins.
• Stylelint CSS using SUIT CSS configuration.
• Transpile JS using babel.
• Eslint JS using airbnb + prettier
• Sets browser env as default eslint environment.
• Automatically resolve paths to images and fonts, inline when suitable.
• Watch file changes when in development.
• Minify CSS and JS when building for production.
• Treeshaking for JavaScript modules when building for production.
• Automatic code style fixes (where doable) though stylelint and prettier.

Requirements

• Node.js ^8.10 or 10+
• Yarn v1.2.1+, or npm v5.4+
• Neutrino v8

Installation

@factorial/frontend-stack-core can be installed via the Yarn or npm clients.

Usage

yarn add neutrino @factorial/frontend-stack-core --dev

Then add the following your package.json.

"scripts": {
  "start": "yarn run neutrino start --use @factorial/frontend-stack-core",
  "build": "yarn run neutrino build --use @factorial/frontend-stack-core --options.env.NODE_ENV production"
}

Default entry point is ./src/index.js.

Example

An example can that consumes @factorial/frontend-stack-core can be found at

https://github.com/factorial-io/factorial-frontend-stack/tree/master/examples/core

FAQ

Why is my CSS not compiled?

You need to import the CSS in your JavaScript entry point so the dependency chain can be started.

import "./index.css";

https://github.com/factorial-io/factorial-frontend-stack/blob/master/examples/core/src/index.js#L3

How do I setup CSS/JS linting in my IDE/editor?

Add a .neutrinorc.js to the project.

touch .neutrinorc.js

Then add the following to .neutrinorc.js.

module.exports = {
  use: [
    "@factorial/frontend-stack-core"
  ]
};

You can ommit the --use flag in npm scripts then.

https://neutrinojs.org/usage.html#using-multiple-presets

Setup modules of stylelintrc and eslintrc

You need to setup a stylelintrc.js and eslintrc.js in your project that uses the configuration provided from the neutrino instance. That way linting through CLI and editor is synced and no config is duplicated.

// .eslintrc.js
const { Neutrino } = require('neutrino');

// Specify middleware to Neutrino prior to calling eslintrc.
// Even if using .neutrinorc.js, you must specify it when using
// the API
module.exports = Neutrino({ root: __dirname })
  .use('.neutrinorc.js')
  .call('eslintrc');

https://neutrinojs.org/packages/eslint/#eslintrc-config

// .stylelintrc.js
const { Neutrino } = require('neutrino');

// Specify middleware to Neutrino prior to calling stylelintrc.
// Even if using .neutrinorc.js, you must specify it when using
// the API
module.exports = Neutrino({ root: __dirname })
  .use('.neutrinorc.js')
  .call('stylelintrc');

https://neutrinojs.org/packages/stylelint/#stylelintrc-config

How do I change the entry and output paths for my project?

You can ovveride the defaults path options in .neutrinorc.js.

https://neutrinojs.org/customization/#overriding-neutrino-options

Example

options: {
  source: "source",
  output: "source/build",
  mains: {
    index: "index.js"
  }
}

How can I setup multiple entry points in my project?

You can set multiple entry points through the mains option in .neutrinorc.js.

https://neutrinojs.org/customization/#optionsmains

Example

module.exports = {
  use: [
    "@factorial/frontend-stack-core"
  ],
  options: {
    mains: {
      a: "a",
      b: "b"
    }
  }
};