如何在没有 uglify.js 问题的情况下将 class 的 React 组件发布到 NPM？
How to publish React Component that is a class to NPM without having uglify.js issues?
我将 ES5 包重写为现代语法以避免弃用警告并将其发布到 npm。
大多数 React 项目，包括基于 next.js 和 create-react-app 的项目都使用 uglify.js，它们会在 class 关键字处中断。
{ Error: commons.js from UglifyJs
Unexpected token: name
...
如何正确编写使用 class 并与 uglify.js 和 npm 一起工作的 React 组件？
React.createClass 已被弃用，因为它将在即将发布的版本中从主 react 包中删除，但是 you can still use the now-separate create-react-class package instead 如果您仍然 need/want 编写组件使用它而不会收到弃用警告。
如果您使用 ES6 类 编写将发布到 npm 的组件，您将需要添加一个转译步骤，以便在可预见的将来将 ES5 代码发布到 npm，因为 - 作为你已经看到 - 不支持 ES6 的工具会在它们上面中断，而使用它们的应用程序会在不支持 ES6 本机 类（例如 IE11）的浏览器中中断。
如果您已经将 Babel 设置为转译 JSX，那么在发布之前转译 类 并不是什么额外的工作 - 安装 babel-preset-es2015 预设并将其添加到您的 Babel 配置中。
即使我们达到工具和浏览器对 ES6 的支持不再是问题的地步，与 createClass 相比，标准 ES6 类 并不是编写 React 组件的非常方便的方式，当他们引入 constructor 样板时，需要手动方法绑定并且必须单独声明静态属性，例如 propTypes。
通常使用提议的语言特性的实验性实现（babel-preset-stage-2 涵盖最有用的特性）来克服这些便利特性（甚至上面关于在没有 ES6 的情况下编写 React 组件的文档也有这样的例子） ) 并使用 Babel 插件将它们转译出来，所以如果你使用这些功能，你将不得不继续转译你的代码！
我将 ES5 包重写为现代语法以避免弃用警告并将其发布到 npm。
大多数 React 项目，包括基于 next.js 和 create-react-app 的项目都使用 uglify.js，它们会在 class 关键字处中断。
{ Error: commons.js from UglifyJs
Unexpected token: name
...
如何正确编写使用 class 并与 uglify.js 和 npm 一起工作的 React 组件？
React.createClass 已被弃用，因为它将在即将发布的版本中从主 react 包中删除，但是 you can still use the now-separate create-react-class package instead 如果您仍然 need/want 编写组件使用它而不会收到弃用警告。
如果您使用 ES6 类 编写将发布到 npm 的组件，您将需要添加一个转译步骤，以便在可预见的将来将 ES5 代码发布到 npm，因为 - 作为你已经看到 - 不支持 ES6 的工具会在它们上面中断，而使用它们的应用程序会在不支持 ES6 本机 类（例如 IE11）的浏览器中中断。
如果您已经将 Babel 设置为转译 JSX，那么在发布之前转译 类 并不是什么额外的工作 - 安装 babel-preset-es2015 预设并将其添加到您的 Babel 配置中。
即使我们达到工具和浏览器对 ES6 的支持不再是问题的地步，与 createClass 相比，标准 ES6 类 并不是编写 React 组件的非常方便的方式，当他们引入 constructor 样板时，需要手动方法绑定并且必须单独声明静态属性，例如 propTypes。
通常使用提议的语言特性的实验性实现（babel-preset-stage-2 涵盖最有用的特性）来克服这些便利特性（甚至上面关于在没有 ES6 的情况下编写 React 组件的文档也有这样的例子） ) 并使用 Babel 插件将它们转译出来，所以如果你使用这些功能，你将不得不继续转译你的代码！