创建React App不会在node_modules目录中剥离Flow类型 [英] Create React App doesn't strip Flow types inside node_modules directory

问题描述

我已经使用 create-react-app@1.4.3 创建了新的React应用.而且我的应用程序依赖于NPM模块，该模块包含多个Flow类型的JSX文件(零售UI ).

I've created new React app using create-react-app@1.4.3. And my app depends on NPM module which contains several Flow typed JSX files (retail-ui).

App.js :

import React, { Component } from 'react';
import Button from "retail-ui/components/Button";
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div>
          <Button>First button</Button>
          <Button>Second button</Button>
      </div>
    );
  }
}

retail-ui/components/Button的负责人:

// @flow
import events from 'add-event-listener';
import classNames from 'classnames';
import * as React from 'react';

import PropTypes from 'prop-types';

import Corners from './Corners';
import Icon from '../Icon';

import '../ensureOldIEClassName';
import styles from './Button.less';

const KEYCODE_TAB = 9;

let isListening: boolean;
let tabPressed: boolean;

function listenTabPresses() {
  if (!isListening) {
...

当我运行 npm start 时，出现此错误:

When I run npm start, I get this error:

./src/App.js
Failed to compile.

./node_modules/retail-ui/components/Button/Button.js
Module parse failed: Unexpected token (16:15)
You may need an appropriate loader to handle this file type.
| const KEYCODE_TAB = 9;
|
| let isListening: boolean;
| let tabPressed: boolean;
|

因此，似乎尚未删除Flow关键字，并且JS语法检查失败.但是，如果我在 App.js 中添加//@flow 和一些Flow类型，一切都会好起来的.如何配置生成的应用程序以在模块内部使用Flow?

So it looks like Flow keywords haven't been stripped and JS syntax checking failed. But if I add // @flow and some Flow types to App.js, everything will be okay. How can I configure generated app to work with Flow inside modules?

推荐答案

我查看了retail-ui package.json，他们似乎没有安装任何babel插件来删除流类型.因此，请将babel插件安装到该特定模块中以对其进行修复.

I looked into retail-ui package.json and they don't seem to have installed any babel plugin to remove flow types. So install babel plugin into that particular module to fix it.

npm install --save-dev babel-plugin-transform-flow-strip-types

在最上层目录中创建具有此内容的.babelrc文件

Create .babelrc file with this content in the most parent directory

{
    plugins: ["transform-flow-strip-types"]
}

这应该在运行时删除流类型

this should remove flow types at runtime

这篇关于创建React App不会在node_modules目录中剥离Flow类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！