javascript - Como usar webpack com babel-loader e flow

Estou tendo dificuldades com algo que eu sinto que não deveria ser uma configuração muito difícil. Quero que essas três tecnologias funcionem juntas:

• webpack para empacotar código
• babel para que eu seja capaz de escrever JavaScript moderno
• flow porque a verificação de tipo é útil assim como testes e linter

Eu já passei por várias configurações disso, mas nenhum dos artigos que encontrei na web parece ser útil.

Eu defini 3 scripts no meu package.json, run, flow e build. A verificação de tipos com yarn run flow funciona perfeitamente, assim como a execução do script através do babel-node usando yarn run start.

Mas quando eu executo yarn run build o seguinte erro aparece através do webpack:

./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.

Parece-me que as anotações de tipo não são removidas corretamente no momento certo. Infelizmente, isso também aconteceu se eu especificar as opções do babel diretamente no webpack, em vez de no .babelrc.

Isso atualmente me impede de empacotar um monte de arquivos .js enquanto uso flow e, embora eu tenha encontrado vários plugins que supostamente removem anotações do flow, simplesmente usar o preset flow é o que flowtype.org parece recomendar.

Para reprodutibilidade, meus arquivos de projeto ficam assim:

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

Resposta #1

Baixe os presets relevantes e adicione-os ao webpack.config.js da seguinte forma:

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

Resposta #2

Eu consegui encontrar uma maneira rápida e fácil também....

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

Meu arquivo .babelrc se parece com isto

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

e instale o predefinido Flow

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