如何使用webpack、babel-loader和flow技术？

Question

我正在处理一项我认为不应该太难的设置。 我希望这三种技术能够一起工作：

- webpack用于打包代码 - babel使我能够编写现代JavaScript - flow因为类型检查和测试和linter一样有用

我已经尝试了几种设置，但我在网上找到的文章都没有帮助。

在我的package.json中定义了3个脚本：run、flow和build。 使用yarn run flow进行类型检查完全正常，使用yarn run start执行脚本也是如此。

但是当我执行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.

我觉得类型注解没有在正确的时机被正确地移除。不幸的是，即使我直接在webpack中指定babel选项而不是使用.babelrc，这也会发生。

目前，这使我无法在使用flow的同时打包一堆.js文件，虽然我找到了几个插件，它们据称可以删除flow注释，但flowtype.org似乎建议仅使用flow预设。

---

为了可重现性，我的项目文件如下：

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

- Jakob Runge

---

尝试在webpack.config中的加载器选项中指定预设: test: '/.js$/', use: { loader: 'babel-loader', options: { presets: ['env', 'flow',] } } - Aleksey L.

我之前尝试过这个方法（现在又再次尝试），但是我得到了同样的错误。我还尝试过仅使用flow预设而不是env，或者交换它们的顺序。 - Jakob Runge

Answer 1

下载相关预设并将它们添加到webpack.config.js文件中，如下所示：

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

- jclyons52

---

是的，但也不完全是： 你指引了我正确的方向，因此我成功地解决了问题。然而，这个问题有两个方面：

1. 确实，use: { loader: … } 设置，正如上面的评论中提到的那样，是其中一个重要部分。
2. 运行 yarn outdated 后，我发现可以更新一些包，更新后事情就像希望的那样工作了。我甚至不需要在 .babelrc 之外指定 query 来使用 babel。

额外的好处是：现在只使用 env 和 flow 预设就可以让事情正常运转了。 - Jakob Runge

@JakobRunge 你能否详细说明你所做的完整更改？ - Shivam Sharma