搭建react移动端组件库全套路一、准备工作

别开腔自己人
1,594 阅读4分钟

搭建react移动端组件库之准备工作

需要用到的技术

  • React
  • Typescript
  • webpack
  • rollup

会实现的组件

  • 仿antd-mobile实现所有组件（目标）
  • 完成一个会有一个对应的文章、但前期准备的时间可能会比较长。

套路

  1. 基于webpack搭建组件的开发环境
    • ts
    • react 16.8+
  2. 有组件的demo页面
  3. 组件的移动端适配
  4. 组件基于rollup打包发布并且使用
  5. 可能会有一个脚手架用于生成每一个组件的模板
  6. 每个组件都会有对应描述文件
  7. 根据每个组件的描述文件产生demo页面

知识点全面学习、仅基础介绍 （已经全部了解的同学可以直接翻到下一章节）

下一章会进行webpack开发环境的搭建，预计两到三天后发布。

webpack

webpack本质是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包

webpack的基本概念

  1. 入口

    在多个代码模块中会有一个一起的.js文件，这个便是webpack构建的入口。webpack会读取这个文件，从它开始解析依赖，然后进行打包。 在常见的项目中：单页应用，那么入口只有一个；多页应用，通常每一个页面代表一个入口。

        module.exports = {
        entry: {
            main: './src/index.js', // 单页应用对应的一个入口
            pageA: './src/pages/a.js', // 多页应用对应的a页面入口
            pageB: './src/pages/b.js' // 多页应用对应的b页面入口
        }
    }

  2. 出口

    有入口的配置，必然就会有出口的配置。出口的配置告诉了webpack将如何将编译打包后的文件写入磁盘。（我们能写多个入口文件、但是只有一个出口的配置）

        // base config 打包出一个bundle.js的文件，写入dist目录下
    module.exports = {
        output: {
            filename: 'bundle.js'
        }
    }
    // Multiple Entry Points
    // 如果有多入口或者chunk,应该使用占位符来确保每个文件具有唯一的名称
    module.exports = {
        entry: {
            app: './src/app.js',
            search: './src/search.js'
        },
        output: {
            filename: '[name].js',
            path: _dirname + '/dist'
        }
    }

  3. 模式

    模式是在webpack4中新加的配置项，为了减少配置，可以在配置项中配置mode项

    • development：会将process.env.NODE_ENV的值设置为development。启用NamedChunksPlugin和NamedModulesPlugin
    • produciton: 会将process.env.NODE_ENV的值设置为production。启用FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin，UglifyJsPlugin。

  4. loader

    loader是webpack中打包编译不同模块的主要功臣，loader可以使你在import或加载模块时预处理文件。loader类似于其他构建工具中的task。 比如一个js文件，引入了css文件，同时还依赖了一个json文件，那么为了解析这个css文件、和json文件我们需要分别用到不同的loader

        // example
    module.exports = {
        module: {
            rules: [
                {
                    test: /\.css/,
                    use: [
                        { loader: 'style-loader' },
                        { loader: 'css-loader' }
                    ]
                },
                {
                    test: /\.ts/,
                    use: 'ts-loader'
                }
            ]
        }
    }

  5. plugin

    webpack中编译相关的事情都是交给loader做，而plugin(插件)主要做的是loader无法完成的事情。比如：控制webpack的输出、将js包打入html文件中、定义环境变量等。

        const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = {
        plugins: [
            new HtmlWebpackPlugin()
        ]
    }

    webpack的基础知识到此结束，这只是最简单的webpack介绍，深入的知识需要大家自己更多的动手。接下来我们开始rollup的基础知识学习

rollup学习

  1. rollup基础

        export default {
        input: 'src/main.js',
        output: {
            file: 'bundle.js',
            format: 'cjs'
        }
    }

    可以使用rollup --config 来指定需要的配置文件。 和webpack不同，rollup没有loader，要对除js文件进行打包，在rollup中只有使用plugin。 the Rollup wiki 维护了可用的插件列表

  2. rollup和webpack的对比

    在构建应用程序时，特别是需要代码拆分和运行时态的动态导入时，rollup对这些功能的支持并不友好。所以在构建第三方库时我们我们可以是用rollup，而在一般的应用程序时，最好选择webpack。虽然rollup也能构建绝大多数的应用程序。 rollup的好处：在构建时不会像webpack一样产生很多的附加代码。

React基础知识

react基础知识不再这里展开讲，对react不了解的可以看这里

Typescript知识

Typescript基础知识也不再这里介绍，官方文档已经很强大了

预告：下一章进行开发环境搭建

avatar
文章
阅读
粉丝