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 值单位

Dependencies (4)

Dev Dependencies (53)

Package Sidebar

Install

npm i ui-hub

Weekly Downloads

1

Version

0.0.10

License

ISC

Unpacked Size

1.2 MB

Total Files

414

Last publish

Collaborators

  • jujienet