common-dev-dependencies

This package contains all dependencies for react-based frontends

• is published on npm as @linguala/common-dev-dependencies
• based on the proposed module setup in react-prototype

It should essentially make it easier to deal with

• ecmascript -> babel-transpilation for each target-platform
• test-setup
• handling these common development dependencies for all linguala-packages in a uniform manner.

babel transforms

This setup builds all ES6+ code for the last 2 browser versions and the currently used node version. Based on the babel-preset-env it is decided what kind of babel-transforms should be run on the target platform. In comparison: babel-preset-latest would just apply all babel transforms that are available. We will save some time and resources with this setup as only a subset of transforms need to run.

Usage in your npm (node package module)

Initialize your module with npm init which generates a package.json file folder if you haven't done this already.

Installation

To use @linguala/common-dev-dependencies first install it as a development dependency:

• Run yarn add --dev @linguala/common-dev-dependencies
• or npm install --save-dev @linguala/common-dev-dependencies

package.json

• name Choose a unique name for your package. If it should be published to https://npmjs.com, prefix it with @linguala, e.g. @linguala/ui-atoms. If it is private add a "private": true in package.json.
• main is the entrypoint for the transpiled ES5 code.
• module is the entrypoint for all ES6-compatible code if your target platform supports it.
• scripts.build is the command to run babel (as it is a dependency of @linguala/common-dev-dependencies it is available in node_modules/ after npm install with npm@3+ flat installation)
• scripts.prepublish is everything that runs when you run npm publish to publish on https://www.npmjs.com/org/linguala.
• scripts.what say what? run with npm run what, just an example to run commands in the node environment.

package.json from here

{
  "name": "@linguala/example-module",
  "private": true,
  "main": "dist/index.js",
  "module": "src/index.js",
  "scripts": {
    "what": "echo say what?",
    "build": "node_modules/babel-cli/bin/babel.js src --out-dir dist",
    "prepublishOnly": "npm run build",
    "lint": "node_modules/eslint/bin/eslint.js src/",
    "test": "node_modules/ava/cli.js tests/"
  },
  "devDependencies": {
    "@linguala/common-dev-dependencies": "^2.2.0"
  },
  "ava": {
    "files": [
      "tests/**/*.js"
    ],
    "require": [
      "@babel/register"
    ],
    "babel": {
      "extensions": [
        "js",
        "jsx"
      ]
    }
  },
  "babel": {
    "presets": [
      [
        "@babel/env",
        {
          "targets": {
            "browsers": [
              "last 2 versions"
            ],
            "node": "current"
          }
        }
      ],
      "@babel/react"
    ]
  },
  "eslintConfig": {
    "extends": [
      "@linguala/eslint-config"
    ]
  },
  {
    "prettier": {
    "semi": false,
    "singleQuote": true,
    }
  }
}