前置条件
在使用 @kirill.konshin/nwb 进行开发前，请确保已安装最新版 Node.js。
简介
@kirill.konshin/nwb 是一个基于 webpack 和 Babel 的开发工具，专注于简化 React 应用程序和组件的开发流程。
其主要特点包括：
- 零配置：直接运行
nwb就可以创建 React 应用或组件库，无需配置文件。 - ESM 和 CommonJS 兼容：支持通过内置的
es和umd命令构建 ES Modules 和 CommonJS 模块。 - 开箱即用：内置支持 React、Preact、Inferno、Rax 等常见框架和库，包括预设的配置和插件。
- 支持多应用程序：可以在同一项目中创建多个应用程序（每个应用程序有自己的
src和public目录）。 - 快速配置：支持通过
nwb.config.js或.nwbrc文件配置，也可以直接在命令行中传递选项。 - 优秀的开发体验：支持自动刷新和即时反馈、源映射和调试等等。
使用 nwb 创建应用程序
首先，全局安装 @kirill.konshin/nwb：
npm install -g @kirill.konshin/nwb
然后，在你想要创建应用程序的目录中，运行：
nwb new react-app my-app
这将创建一个名为 my-app 的全新 React 应用程序。
使用 nwb 创建组件库
创建一个组件库非常类似于创建一个应用程序，只需稍作修改即可。
nwb new react-component my-package
这将创建一个名为 my-package 的全新 React 组件库。你可以使用 nwb build 命令来构建 CommonJS 和 ES Modules：
nwb build es nwb build umd
配置选项
@kirill.konshin/nwb 支持多种配置选项，可以通过 nwb.config.js、.nwbrc 或命令行选项指定。
端口和主机
你可以使用 nwb.config.js 或命令行选项来指定服务的端口和主机。比如：
module.exports = {
devServer: {
host: '0.0.0.0',
port: 3001
}
};或
nwb serve --host 0.0.0.0 --port 3001
预处理器
@kirill.konshin/nwb 内置支持 SCSS 和 Less 预处理器。可以通过 .nwbrc 文件或命令行选项来指定要使用的预处理器。
{
"webpack": {
"styles": {
"css": true,
"sass": true
}
}
}或
nwb build --css-loader-options modules --scss
打包插件
@kirill.konshin/nwb 支持多种打包插件，这些插件可以通过 .nwbrc 文件或命令行选项以脚本方式进行配置和调用。
-- -------------------- ---- -------
-
---------- -
---------- --
-------- ------- -- ----------------------------------
------- -----
--
--
-
-或
$ nwb build --plugin webpack.optimize.CommonsChunkPlugin
更多详细的配置详情，请参考 @kirill.konshin/nwb 的官方文档。
发布应用程序和组件库
@kirill.konshin/nwb 支持使用 npm publish 发布应用程序和组件库。
首先，使用 nwb new 创建一个新的应用程序或组件库。然后，修改 package.json 文件中的 name 和 version 字段，确保三者一致。
最后，使用以下命令发布你的应用程序或组件库：
npm publish
结尾
@kirill.konshin/nwb 是一个非常优秀的开发工具，可以大幅简化 React 应用程序和组件库的开发流程。它支持多种配置选项和打包插件，可以帮助你轻松构建出一个高效、优雅、模块化的应用程序或组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa581e8991b448d81fb