基于create-react-app脚手架编写UI组件包发布到npm平台

最新推荐文章于 2024-09-11 09:00:22 发布

胖叔001

最新推荐文章于 2024-09-11 09:00:22 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： npm 工具包开发教程

本文链接：https://blog.csdn.net/qq_21895821/article/details/102862324

版权

本文档介绍了如何基于create-react-app构建UI组件库，并将其发布到npm平台。首先，讲解了属性定义，包括入口、模块、代码库等概念。接着，详细阐述了webpack的执行流程，从解析Entry开始，通过Loader转换Module，再到形成Chunk并最终输出。然后，指导读者如何初始化和安装项目，包括执行初始化命令和配置文件的设置。接着，展示了项目目录结构，并说明了打包过程。最后，介绍了如何引用发布的组件包及其使用方法。

摘要由CSDN通过智能技术生成

`webpack`属性定义

Entry: 入口
Module:模块，webpack中一切皆是模块
Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割
Loader:模块转换器，用于把模块原内容按照需求转换成新内容
Plugin:扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情
Output: 输出结果

`webpack`执行流程

webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前的Module依赖的Module.这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组也就是一个Chunk。最好Webpack会把所有Chunk转换成文件输出。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。

初始化和安装

`Create-react-app`初始化新建项目

执行命令

npx create-react-app ui-component-demo
cd ui-component-demo
npm start

会自动打开http://localhost:3000:
在这里插入图片描述

安装`webpack`，配置`webpack.config.js`，`package.json`

执行命令：

npm install --save-dev webpack webpack-cli

配置webpack.config.js

const path = require('path');

module.exports = {
   
    mode: "production",
    entry: {
   
        index: "./src/components/index.js"
    },
    output: {
   
        path: path.resolve(__dirname, "dist"),
        filename: '[name].js',
        library: "myLibrary",
        libraryTarget: 'umd',
        publicPath: '/', // 上线时配置的是cdn的地址
    },
    resolve: {
   
        modules: [
            "node_modules",
            path.resolve(__dirname, "app")
        ],
        // 用于查找模块的目录
        extensions: [".js", ".json", ".jsx", ".css"],
        alias: {
   

        }
    },
    devServer: {
   
        hot: true,
        https: false,
        compress: false,
        port