javascript - Ako používať webpack s babel-loader a flow

Mám problémy s tým, čo by podľa mňa nemalo byť príliš zložité nastavenie. Chcem, aby tieto tri technológie spolu fungovali:

• webpack na zbalenie kódu
• babel, aby som mohol písať moderný JavaScript
• Flow, pretože kontrola typov je užitočná rovnako ako testy a linter

Už som prešiel niekoľkými nastaveniami tohto, ale žiadny z článkov, ktoré som našiel na internete, sa nezdá byť užitočný.

Definoval som 3 skripty v mojom package.json, run, flow a build. Kontrola typov s yarn run flow funguje dokonale, a rovnako funguje aj spustenie skriptu cez babel-node pomocou yarn run start.

Ale keď vykonám yarn run build, cez webpack sa objaví nasledujúca chyba:

./node_modules/webpack/bin/webpack.js
Hash: 207d42dac5784520fc99
Version: webpack 3.10.0
Time: 49ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.65 kB       0  [emitted]  main
   [0] ./src/main.js 181 bytes {0} [built] [failed] [1 error]

ERROR in ./src/main.js
Module parse failed: Unexpected token (3:5)
You may need an appropriate loader to handle this file type.
| // @flow
|
| type Foo = {
|   foo: string,
| };
error Command failed with exit code 2.

Zdá sa mi, že typové anotácie sa nezbavia správne v správnom okamihu. Bohužiaľ sa to stalo aj vtedy, ak som definoval možnosti babel priamo vo webpack namiesto v súbore .babelrc.

Toto ma momentálne zlyháva pri zhlukovaní viacerých súborov .js pri používaní Flow a hoci som našiel niekoľko pluginov, ktoré údajne odstraňujú anotácie Flow, jednoducho použitie prednastavenia flow je to, čo flowtype.org odporúča.

Pre reprodukovateľnosť vyzerajú moje projektové súbory takto:

package.json:

{
  …
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
    "flow-bin": "^0.60.1",
    "webpack": "^3.9.1"
  },
  "scripts": {
    "build": "./node_modules/webpack/bin/webpack.js",
    "start": "./node_modules/babel-cli/bin/babel-node.js src/main.js",
    "flow": "./node_modules/flow-bin/cli.js"
  }
}

.flowconfig:

[include]
./src

[ignore]

[libs]

[lints]

[options]

.babelrc:

 {
   "presets": ["env", "flow"]
 }

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js',
  },
  resolve: {
    modules: [
      path.resolve('./src/'),
      'node_modules',
    ],
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: '/.js$/',
        loader: 'babel-loader',
      },
    ],
  },
};

src/main.js:

// @flow

type Foo = {
  foo: string,
};

const defaultFoo: Foo = {
  foo: 'bar',
};

console.log(defaultFoo);

Odpoveď č. 1

Stiahnite si príslušné predvoľby a pridajte ich do súboru webpack.config.js nasledovne:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'stage-0', 'react']
        }
      }
    }
  ]
}

Odpoveď č. 2

Podarilo sa mi tiež nájsť rýchly a jednoduchý spôsob....

https://babeljs.io/docs/babel-preset-flow

Môj súbor .babelrc vyzerá takto

{
 "presets": [["@babel/preset-env"],["@babel/preset-flow"]]
}

a nainštalovať prednastavenie Flow

npm install --save-dev @babel/preset-flow