什么是 npm 包 wr
wr 是一款前端组件库构建工具。它可以让你通过 HTML、CSS 和 JS 来构建 React 组件，并将其打包为 npm 包。这个工具使得前端组件库的开发变得十分简单。
wr 的核心思想是让开发者使用基本的 Web 技术构建组件，并将其转换为可复用的组件，以便在不同的项目中使用。
安装 wr
在使用 wr 之前，你需要先在命令行界面中安装它。使用以下命令即可：
npm install -g wr
创建一个组件
首先，你需要创建一个新的 wr 组件。使用以下命令：
wr create my-component
这将会创建一个 my-component 的文件夹，并生成一些默认的文件和目录：
my-component/ ├── index.js ├── index.css ├── index.html ├── package.json └── README.md
index.js文件是你的组件的 JavaScript 代码。index.html文件是你的组件的 HTML 代码。index.css文件是你的组件的 CSS 代码。package.json文件是你的组件的描述文件，它包含了依赖信息、作者、版本信息等。README.md文件是你的组件的介绍文件，其中包含了有关组件的详细信息。
编写组件代码
在 my-component 文件夹中编写你的组件代码。你可以使用普通的 HTML、CSS 和 JavaScript 来构建组件，在里面引用 React 库即可。
下面是一个简单的 Button 组件的例子：
<!-- index.html --> <button class="button">Click</button>
-- -------------------- ---- ------- -- --------- -- ------- - ----------------- -------- ------- ----- ------ ------ -------- ---- ----- ----------- ------- ---------------- ----- -------- ------------- ---------- ----- -
-- -------------------- ---- ------- -- -------- ------ ----- ---- -------- ------ -------------- ----- ------ - -- -- - ------- --------------------------------- -- ------ ------- -------
打包组件
完成组件的编写后，使用以下命令来打包组件：
wr build
打包完成后，你将在 my-component 文件夹中看到一个新的文件夹：dist。它包含了组件的打包后的文件，以及一个名为 my-component-x.x.x.tgz 的 npm 包。
发布组件
现在你可以将 my-component-x.x.x.tgz 文件上传到 npm 上。在命令行中运行以下命令：
npm publish
然后，其他人就可以使用以下命令来安装并使用你的组件了：
npm install my-component
总结
wr 是一个基于 React 的前端组件库构建工具。它能让开发人员通过 HTML、CSS 和 JavaScript 来构建组件，并将其打包为 npm 包。通过详细的学习和实践，我们可以快速构建出高质量的前端组件库，提升前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68033