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']
};
- .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';