Question

我使用create-react-app@1.4.3创建了新的React应用。我的应用程序依赖于NPM模块，它包含几个Flow类型的JSX文件（retail-ui）。

我的React app的

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

零售业主管/组件/按钮：

// @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时，我收到此错误：

./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语法检查失败了。但是如果我将// @flow和一些Flow类型添加到 App.js ，一切都会好的。如何配置生成的应用程序以使用Flow内部模块？

Answer 1

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

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

在最父目录

中创建包含此内容的.babelrc文件

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

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

创建React App不会在node_modules目录

1 个答案: