javascript - Cómo usar webpack con babel-loader y flow

Estoy teniendo dificultades con lo que siento que no debería ser una configuración demasiado complicada. Quiero que estas tres tecnologías funcionen juntas:

• webpack para empaquetar código
• babel para que pueda escribir JavaScript moderno
• Flow porque la verificación de tipos es útil al igual que las pruebas y el linter

Ya he pasado por varios configuraciones de esto, pero ninguno de los artículos que he encontrado en la web parece ser útil.

He definido 3 scripts en mi package.json, run, flow y build. La verificación de tipos con yarn run flow funciona perfectamente, y también ejecutar el script a través de babel-node usando yarn run start.

Pero cuando ejecuto yarn run build aparece el siguiente error a través de 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.

Me parece que las anotaciones de tipo no se eliminan correctamente en el momento adecuado. Lamentablemente, esto también ocurre si especifico las opciones de Babel directamente en webpack en lugar de en el .babelrc.

Esto actualmente me derrota al agrupar un montón de archivos .js mientras uso flow y, aunque encontré varios plugins que supuestamente eliminan las anotaciones de flow, simplemente usar el preset flow es lo que parece recomendar flowtype.org.

Para reproducibilidad, mis archivos de proyecto se ven así:

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

Respuesta #1

Descargue los ajustes preestablecidos relevantes y agréguelos al webpack.config.js de la siguiente manera:

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

Respuesta #2

También pude encontrar una manera rápida y fácil....

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

Mi archivo .babelrc se ve así

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

e instalar la configuración predefinida de Flow

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