React / Babelify 的新手；如何修复 "Accessing PropTypes" 警告

Question

我是 React 和 Babelify 的新手。

我正在使用 Node 编译 Web 应用程序。现在我正在这样做：

browserify({debug: true})
.transform(
  babelify.configure({
    comments : false,
    presets  : [ 
      "react",
      "babili",
    ],  
  })  
)   
.require('./app.js', {entry: true})
.plugin(collapse)
.bundle()
.on("error", function (err) {
  console.log("Error:", err.message);
})  
.pipe(fs.createWriteStream(destination));

我的应用目前是一个非常简单的 "Hello, World!" 概念验证，它是关于这个复杂的：

class Renderer {
  render () {
    ReactDOM.render(
      <div>Hello, World!</div>
      document.querySelector("#react-app")
    );  
  }
}
module.exports = Renderer;

我收到此警告：

Warning: Accessing PropTypes via the main React package is deprecated, and 
will be removed in  React v16.0. Use the latest available v15.* prop-types
package from npm instead. For info on usage, compatibility, migration and more,
see https:/gfb.me/prop-types-docs

Warning: Accessing createClass via the main React package is deprecated, 
and will be removed in React v16.0. Use a plain JavaScript class instead. If
you're not yet ready to migrate, create-react-class v15.* is available on npm
as a temporary, drop-in replacement. For more info see
https:/gfb.me/react-create-class

Error: [BABEL] /home/gweb/code/app.js: Unknown option: 
/home/gweb/code/node_modules/react/react.js.Children. Check out
http:/gbabeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options 
object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see 
http:/gbabeljs.io/docs/plugins/#pluginpresets-options. (While processing
preset: "/home/gweb/code/node_modules/react/react.js") while parsing file:
/home/gweb/code/app.js

我阅读了推荐的内容，但我对这两方面都还很陌生，所以我不太了解它。我还阅读了很多其他文章和 SO 帖子，但是其中 none（我能找到）有这个集合（browserify、babelify、react）。

我目前的目标只是让它转译并支持 React 语法（据我了解，这是 JSX？），这样我就可以开始使用它并学习这两个库。实现它的最快方法是什么（我不一定需要最有效或最好；我宁愿在这个阶段有最容易理解的咒语，所以我可以在学习时让事情变得透明）。

Answer 1

这不是你的设置问题，而是你的导入语句有问题，我假设你是从 react 导入 react 和 PropTypes

import React, { PropTypes } from 'react';

因此，如警告中所述，使用 React 库中的 PropTypes 已被弃用，您需要将 PropTypes 安装为来自 npm 的独立库并改用它。

npm install prop-types --save 然后做，

import PropTypes from 'prop-types'，了解更多信息 https://www.npmjs.com/package/prop-types

这将解决您的第一个警告，对于第二个警告，您需要安装和使用 https://www.npmjs.com/package/create-react-class。

对于 babel 错误，请检查您是否安装了两个必需的库。 https://www.npmjs.com/package/babel-preset-react, https://www.npmjs.com/package/babel-preset-babili

Answer 2

您有 import * as React from 'react' 形式的导入吗？

如果是，请尝试将其替换为 import React from 'react'。

* 从 react 导入所有内容，包括已弃用的导出，这就是触发警告的原因。

React / Babelify 的新手；如何修复 "Accessing PropTypes" 警告

New to React / Babelify; How to fix "Accessing PropTypes" warning

node.js

browserify

reactjs

babeljs