rollup打包工具的使用（remax组件库）

1.安装依赖

{
  "name": "tengUI",
  "version": "1.0.0",
  "main": "/teng/bundle.js",
  "license": "MIT",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "rollup-dev": "rollup --config --watch",
    "rollup-build": "rollup --config"
  },
  "author": "",
  "description": "波兰，辣鸡的 Remax 组件库",
  "dependencies": {
    "@rollup/plugin-json": "^4.1.0",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-import": "^1.13.0",
    "classnames": "^2.2.6",
    "dayjs": "^1.8.23",
    "less": "^3.12.2",
    "less-loader": "^7.0.1",
    "postcss-modules": "^3.2.2"
  },
  "peerDependencies": {
    "react": ">=16.13.1",
    "remax": "^2.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "@rollup/plugin-image": "^2.0.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-remax": "^2.7.6",
    "cross-env": "^7.0.2",
    "cssnano": "^4.1.10",
    "named-exports-db": "^0.1.6",
    "postcss-nested": "^4.2.3",
    "postcss-simple-vars": "^5.0.2",
    "react": "^16.13.1",
    "remax": "^2.1.1",
    "rollup": "^2.23.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-clear": "^2.0.7",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-postcss": "^3.1.8",
    "rollup-plugin-progress": "^1.1.2",
    "rollup-plugin-terser": "^7.0.0"
  }
}

rollup.config.js的配置

import babel from "rollup-plugin-babel";
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import progress from "rollup-plugin-progress";
import namedExports from 'named-exports-db';
import pluginJson from '@rollup/plugin-json';
// 压缩打包代码（这里弃用因为该插件不能识别es的语法，所以采用terser替代）
// import { uglify } from 'rollup-plugin-uglify';
// 压缩打包代码
import { terser } from 'rollup-plugin-terser';
// 使rollup可以使用postCss处理样式文件less、css等
import postcss from 'rollup-plugin-postcss';
// 可以处理组件中import图片的方式，将图片转换成base64格式，但会增加打包体积，适用于小图标
import image from '@rollup/plugin-image';
// 处理less嵌套样式写法
import nested from 'postcss-nested';
// 可以提前适用最新css特性（已废弃由postcss-preset-env替代，但还是引用进来了。。。）
// import cssnext from 'postcss-cssnext';
// 替代cssnext
import postcssPresetEnv from 'postcss-preset-env';
// css代码压缩
import cssnano from 'cssnano';
import postcssModules from 'postcss-modules'
const extensions = ['.js', '.jsx', '.ts', '.tsx', 'css', '.less'];
export default {
  input: './src/component/index.js',
  output: {
    file: './teng/bundle.js',
    format: 'cjs',
    name: 'teng-ui'
  },
  plugins: [
    image(),
    postcss({
      plugins: [
        nested(),
        postcssPresetEnv(),
        cssnano(),
        postcssModules()
      ],
      modules: true,
      extensions: ['.css', '.less'],
      use: [['less', {
        javascriptEnabled: true
      }]],
      extract: 'bundle.css'
    }),
    babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true
    }
    ),
    progress(),
    // resolve和external是相反的含义，一个是把第三方依赖打包进来，一个是排除
    resolve({ extensions }),
    commonjs({
      include: /node_modules/,
      namedExports,
      ignoreGlobal: false,
    }),
    terser(),
    pluginJson()
  ],
  external: ['remax', 'remax/one', 'react']
};

3. .babelrc文件创建

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    [
      "remax",
      {
        "typescript": {
          "allowNamespaces": true
        },
        "class-properties": {
          "loose": true
        },
        "decorators": {
          "legacy": true
        },
        "throw-if-namespace": false
      }
    ]
  ],
  "plugins": [],
  "ignore": [
    "node_modules/**"
  ]
}

未解决的问题，css.module未能很好使用上。
例子：

index.js

import * as React from 'react';
import { Button } from 'remax/one';
import './index.less'
import styles from './index.less.json'
const TButton = (props) => {
  // 通过style 传入样式
  const {
    className, TClick
  } = props
  return (
    <Button onClick={
      TClick
    } className={`${styles.index_btn__12HNs} ${className}`}  >{props.children}</Button>
  )
}
export default TButton

index.less

.btn {
  width: 630px;
  height: 90px;
  background: #0078ff;
  border-radius: 10px;
  line-height: 90px;
  font-size: 34px;
  text-align: center;
  color: #fff;
  border: 0;
  // 移除浏览器默认样式
  margin: 0;
  outline: 0;
  cursor: pointer;
  // 覆盖微信默认的<overflow: hidden>，<overflow: hidden>隐藏的是border以内的内容，隐藏不包括border
  overflow: unset;
  // 设置点击链接的时候出现的高亮颜色
  // -webkit-tap-highlight-color: unset;
}
.btn-active {
  background: #f3f5f7;
}

index.less.json

{"index_btn__12HNs":"_index_btn__12HNs_jw3cx_1","index_btn-active__1lBeR":"_index_btn-active__1lBeR_jw3cx_1"}

问题index.less.json不能自动和样式配对，需要手动修改，有知道吗，可以告诉我一下。

入口文件：
index.js

export { default as TButton } from './Button';