Narnia's Poofy Meatcleaver

    ui-hub
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.10 • Public • Published

    从 0 搭建 react + ts + webpack 环境

    使用 babel-plugin-import 支持按需加载

    • 安装 babel-plugin-import
    npm install babel-plugin-import --save-dev
    
    • 在 babel 的配置文件中配置 plugin

    可以在 package.json.babelrc 等位置配置 babel

    以 babelrc 配置文件为例(需自行删除代码中所有注释)

    {
      // "presets": ...
      "plugins": [
        // ...
        [
          "babel-plugin-import",
          {
            // 使用组件时自动附带上该组件的css样式
            "style": "css",
            "libraryDirectory": "es",
            "libraryName": "ui-hub"
          }
        ]
      ]
    }

    按需加载支持 less 变量自定义

    使用 babel-plugin-import 支持按需加载(含样式),你可以设置 "style": true 来加载 less 样式文件,并通过 less-loadermodifyVars 修改组件预设的变量。

    通过这一方式,你可以更改组件的主题表现(颜色、大小等)。

    1. 配置 babel-plugin-import 令其加载 less 格式的样式
    {
      // "presets": ...
      "plugins": [
        // ...
        [
          "babel-plugin-import",
          {
            // 使用组件时自动附带上该组件的less样式
            "style": true,
            "libraryDirectory": "es",
            "libraryName": "ui-hub"
          }
        ]
      ]
    }
    1. 增加 less\less-loader
    npm install less less-loader --save-dev
    
    1. 增加 webpack less 处理配置
    {
      test: /\.less$/,
      use: [
        // ...
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              modifyVars: {
                // ...
                '@baseFontSize': 100,
                // ...
              }
            }
          }
        }
      ]
    }

    @baseFontSize 设置一个 rem 的基础值,当设置这一基础值后,组件的大小将转换为 rem 值单位

    Keywords

    none

    Install

    npm i ui-hub

    DownloadsWeekly Downloads

    1

    Version

    0.0.10

    License

    ISC

    Unpacked Size

    1.2 MB

    Total Files

    414

    Last publish

    Collaborators

    • jujienet