自然地，我们都朝着更大的方向前进。 在这里，我们开始在React.js中构建我们的第一个新应用程序，并且即将开始我们的第二个应用程序。 我们预计，在第一个应用程序中使用的某些组件在第二个应用程序中也将很有用。 为了在这两个应用程序之间共享代码，我们决定采用创建NPM模块的方法，这使得在任何应用程序中都非常容易安装。 我想与您分享我所学到的东西，以及在此过程中可能遇到的任何痛点。
Package.json
如果您查看不同的npm回购，它们基本上就像一个小型项目。 您有一些构建步骤，一个gulp或grunt文件，一个.git目录和package.json。 那么从哪里开始呢？ NPM回答这个问题很有帮助。 他们提供了一个很好的终端命令
npm初始化
这将引导您快速完成package.json文件的设置。 我通常只做所有默认值。 之后，您可以开始构建组件或npm项目。 或者在我们的情况下，只需复制现有的组件代码，然后创建用户友好的API。
建立步骤
在尝试创建npm模块时，我想使其尽可能轻巧。 因此，我选择使用简单的npm脚本，而不是使用Gulp / Grunt这样的构建工具。 设置一个很简单。
在package.json文件中，您可以添加一个新属性“ scripts”作为对象，如下所示：
“脚本”：{
“ build”：“ rm -rf dist && node ./scripts/build-dist”，
“ otherCmd”：“更多终端命令...”
}
在终端中执行这些坏男孩之一的方式将是：
npm运行构建
在我上面的示例中，您可能没有注意到的是可以使用外部节点脚本。 就我而言，我在`。/ scripts / build-dist.js`中有一个node.js文件。 如果您像我一样，并且缺少终端命令部门，那么对于更复杂的指令，我发现编写节点脚本要容易得多。
的CSS
如果您有一个组件，则可能会有样式。 我不太喜欢在您的jsx文件中包含CSS，而宁愿使用scss。 我解决此问题的方法是迫使npm模块的使用者包括我编译的css文件或scss文件，这对我们来说效果很好。 如果使用者使用scss，则他们实际上可以通过覆盖我们已经明确定义的scss变量来轻松配置和自定义npm组件。 如果他们仅使用纯CSS，则它们将需要覆盖我们拥有的类，这将要求他们深入研究CSS文件。
ES6
在这里，我们是ES6 / 7的忠实拥护者，并且使用了新工具。 我只是想分享一些花了我半天时间才能弄清楚的东西。 如果您将Babel CLI与React和jsx文件一起使用，则需要一个.babelrc文件，即babel配置文件。 您将在编译jsx时遇到如下错误：
语法错误：src / RangeSlider.jsx：意外令牌（135：6）
133 |
134 | 返回（
> 135 | <div
| ^
Babel无法理解您的jsx文件中的html，并且会嘲笑您。 因此，解决此问题只需在文件根目录中添加一个.babelrc即可：
{
“插件”：[
“ transform-react-jsx”，
“添加模块出口”
]，
“预设”：[“ es2015”]
}
自述文件
NPM模块中最重要的部分可能是包含自述文件！ 没有开发人员愿意深入研究您的代码并弄清楚发生了什么。 因此，文档……我使用的最好的NPM模块是那些我阅读自述文件的模块，并且可以在几分钟内即插即用。
示例还有助于极大地理解更复杂的模块，这些模块具有太多无法解释的选项和配置。 有些人（我）并不总是想读两次，三遍并且不理解您在说什么。 图片值一千个字。
为自己打造
通过这个过程使我意识到，要解决每个用例和每个消费者都不容易。 每个人的问题都不一样，每个人都希望进行一些调整。 因此，从小处入手。 首先，您的模块应该只通过一小部分配置即可解决您的问题。 它应该做的很好，而不是很多事情。 因此，开源并分享财富，但要满足您的需求。
