babel-loaderとflowでwebpackを使用する方法

Question

セットアップが難しいと感じていることに苦しんでいます。

• WebPACKの型チェックがちょうどテストやリンター
ように便利ですので、私は現代のJavaScript
• 流れを記述することができるよようにコードに
• バベルをバンドルする： は、私はこれらの3つの技術が一緒に仕事をしたいです

私はすでにいくつかの設定を行っていますが、ウェブ上で見つけた記事は役に立ちません。

---

私は私のpackage.json、run、flowとbuildで3つのスクリプトを定義しました。 yarn run flowでタイプチェックを行うと、yarn run startを使用してスクリプトトラフbabel-nodeを実行すると完全に機能します。

しかし、私はyarn run buildを実行すると、次のエラーがトラフの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. 

型注釈は、右の時点で正しく削除されませんように私には見えます。悲しいことに、もし私が.babelrcとは対照的にwebpackに直接babelオプションを指定すると、これも起こります。

これは、現在の流れを利用しながら、.jsファイルの束を束ねで私を破り、私はおそらくストリップフローの注釈単にflowプリセットを使用して、いくつかのプラグインを見つけながらflowtype.orgがお勧めと思われるものです。 reproducibillityについては

---

、私のプロジェクトファイルには、次のようになります。

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

Answer 1

関連のプリセットをダウンロードし、それらを追加webpack.config.jsは次のようになります。

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