javascript - Cara menggunakan webpack dengan babel-loader dan flow

Saya sedang bergelut dengan apa yang saya rasakan sepatutnya bukanlah satu persediaan yang terlalu sukar. Saya mahu tiga teknologi ini berfungsi bersama:

• webpack untuk menggabungkan kod
• babel supaya saya dapat menulis JavaScript moden
• aliran kerana pemeriksaan jenis adalah berguna sama seperti ujian dan linter

Saya telah melalui beberapa tetapan ini tetapi tiada artikel yang saya temui di web nampaknya berguna.

Saya telah mendefinisikan 3 skrip dalam package.json saya, run, flow dan build. Pemeriksaan jenis dengan yarn run flow berfungsi dengan sempurna, dan begitu juga menjalankan skrip melalui babel-node menggunakan yarn run start.

Tetapi apabila saya menjalankan yarn run build, ralat berikut muncul melalui 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.

Nampaknya bagi saya bahawa anotasi jenis tidak dibuang dengan betul pada titik yang betul. Malangnya, ini juga berlaku jika saya menyatakan pilihan babel dalam webpack secara langsung berbanding dengan .babelrc.

Ini pada masa ini mengalahkan saya dalam menggabungkan sekumpulan fail .js sambil menggunakan flow dan walaupun saya menemui beberapa pemalam yang kononnya membuang anotasi flow, hanya menggunakan pratetap flow adalah apa yang nampaknya disyorkan oleh flowtype.org.

Untuk kebolehulangan, fail projek saya kelihatan seperti ini:

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

Jawapan #1

Muat turun pratetap yang berkaitan dan tambahkan ke webpack.config.js seperti berikut:

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

Jawapan #2

Saya juga dapat mencari cara yang cepat dan mudah....

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

Fail .babelrc saya kelihatan seperti ini

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

dan Pasang pratetap Flow

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