什么是 primer-module-build
Primer-module-build 是一个基于 webpack 搭建的开发脚手架，它提供了一些常用的功能和工具，可以帮助开发者快速搭建一个基于 React 组件的项目，并将其发布为一个 NPM 包。
这个脚手架实现了以下功能：
- 支持 ES6 语法和 JSX 语法编写组件代码。
- 支持使用 Sass 编写样式。
- 支持通过 npm scripts 自动构建、测试、发布项目。
- 支持开发环境下的热更新。
- 支持将组件打包成独立的 UMD 格式的 JS 文件。
如何使用 primer-module-build
安装
安装 primer-module-build 的方法很简单，只需要在终端中执行以下命令即可：
npm install primer-module-build --save-dev
配置文件
安装完成后，我们需要创建一个配置文件来告诉 primer-module-build 如何构建我们的项目。我们可以在项目的根目录下创建一个名为 webpack.config.js 的文件，并将以下代码复制进去：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- -------------------- - -----------------------------------
----- ----------------- - -------------------------------
----- -------------------------- - ------------------------------------------
----- - ------------------ - - --------------------------------
-------------- - --- - ---- -- -- -
----- ------------- - ---- --- --------------
------ -
------ ------------------
------- -
----- ----------------------- --------
--------- ------------- - ----------- - --------------------------
-------- ----------------------
-------------- -----
--
---------- -
------------ -------------------- ----------
----- ----
--
-------- -
----------- ------- ------- ------ --------
--
-------- ------------- - ------------ - ------
------- -
------ -
-
----- -----------------
------- ---------------
-------- ---------------
-------- -
--------------- ----
-
--
-
----- ----------
---- -
------------- -- ---------------
-------------- -- ----------------------------
-
------- -------------
-------- -
-------- -
--------------- -------------
- -----------------------
- ---------------
--
---------- -------------
-
--
-------------
-----------------
-
-
--
-------- -
--- ---------------------
--- -------------------
--------- ---------------------
---
--- ----------------------
--------- ------------- - ------------ - --------------------------
---
--- -----------------------------
--- ------------------------------------
--
------------- -
------------ -
------- ------
----- -----
-
-
--
--这个配置文件的内容比较多，我们可以简单说明一下各个部分的作用：
entry：入口文件的路径，这里指定了src/index.tsx。output：输出文件的配置，这里我们将输出文件放到了dist目录下，并且将它打包成了一个 UMD 格式的 JS 文件。devServer：开发环境下的服务器配置，这里我们指定了服务器地址和端口号。resolve：文件引入时的解析规则，这里我们指定了.ts,.tsx,.js,.json四种拓展名的解析规则。devtool：生成 source map 的方式，在开发环境下我们需要生成 source map。module：模块解析的规则，这里我们将 JS 和 TS 文件使用 babel-loader 进行编译，将 Sass 文件使用一系列 loader 进行编译。plugins：webpack 插件的配置，这里我们使用了很多插件，如 HtmlWebpackPlugin 生成 HTML 文件、MiniCssExtractPlugin 生成 CSS 文件等等。optimization：优化项的配置，这里我们将第三方库和业务代码分别打包出来，以达到更好的缓存效果。
命令行
安装完成并配置好了构建文件之后，我们可以在 package.json 文件中加入一些 npm scripts，方便我们进行构建、测试以及发布操作。例如：
{
"scripts": {
"start": "webpack serve --config webpack.config.js --hot",
"build": "webpack --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"publish": "npm publish"
}
}我们可以通过 npm start 命令在本地开启开发环境的热更新服务器，通过 npm run build 命令打包出用于发布的代码，通过 npm test 命令进行测试，最后通过 npm run publish 命令将代码发布到 npm registry。
示例代码
我们可以为这个项目创建一个很简单的示例，假设我们的组件名叫做 MyComponent，创建一个名为 src/MyComponent.tsx 的文件，将以下代码复制进去：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------ ---- ---------------------------- ------ --------- ---------------- - --- ----------- ----- -- ----- ------- - ------ ----- ----------- - -- ---- -- ----------------- -- - ---- ------------------------------------ --
这是一个非常简单的组件，它接受一个名为 text 的属性，并将它显示在页面上。最后，我们可以将这个组件导出，方便其他开发者使用。在 src/index.tsx 文件中，我们可以将这个组件作为一个导出对象：
export { MyComponent } from './MyComponent';这样就可以将 MyComponent 作为一个独立的 React 组件导出，供其他开发者使用。
总结
通过使用 primer-module-build，我们可以快速搭建一个基于 React 组件的项目，将其打包成一个独立的 UMD 格式的 JS 文件，方便其他开发者使用。虽然 primer-module-build 的配置文件比较复杂，但是相信通过这篇文章的介绍，读者们已经掌握了大体的使用方式，可以自己动手尝试一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f713c9ba9b7065299ccbb3c