[RFC] 重新 Review 业务组件自动生成 style.js 以及项目中自动引入该文件的功能设计

[imsobear]

背景

在业务组件工程设计初期，为了实现引入业务组件无需单独 import 对应样式，同时兼容不支持 js 里 import css 的老工程体系，因此设计了 style.js 方案：

• 业务组件打包构建时自动生成 style.js 文件，在该文件中引入业务组件自身的样式（index.css）以及依赖的其他组件样式（style.js）：

// es/style.js
import '@ice/img/es/style.js';
import './index.scss';

• 项目工程里自己实现了 webpack-plugin-import 以及 vite-plugin-component-import 来实现自动引入业务组件 style.js 的功能，此部分能力类似 babel-plugin-import 自动引入样式的方案：

ice/packages/plugin-react-app/src/setBase.js

Lines 58 to 72 in 30cae8e

	// WebpackPluginImport
	.plugin('WebpackPluginImport')
	.use(WebpackPluginImport, [[
	{
	libraryName: /@ali\/ice-.*/,
	stylePath: 'style.js',
	},
	]])
	.end();
	// auto inject style.js of component (webpack-plugin-import) in mode vite
	if (userConfig.vite) {
	modifyUserConfig('vite.plugins', (vitePlugins) => {
	// eslint-disable-next-line global-require
	return [...(vitePlugins || []), require('vite-plugin-component-style').default()];
	});

问题

• 组件构建逻辑过于复杂
• 非 icejs 的工程体系无法自动引入组件样式，需要单独 import style.js

方案

• build-plugin-component 发一个小版本支持通过选项关闭生成 style.js 以及 babel-plugin-import 的逻辑，业务组件脚手架里默认开启该选项，
  • build-plugin-component 下一个大版本不再支持该能力，需要引单独插件
• 组件样式文件由组件 js 自身引入，比如直接在 src/index.jsx 里 import './index.scss'，并且在 package.json 里配置好对应的 sideEffects 字段，防止被 tree-shaking 掉
• 对于存量的业务组件则继续使用上述 webpack-plugin-import + vite-plugin-component-import 的能力
  • icejs 3.0 版本（很久远）不再内置该能力，需要引单独插件

[maoxiaoke]

业务组件脚手架变更：

• 移除 package.json stylePath 字段
• 新增 sideEffects 字段，配置如下：

sideEffects: [
 "dist/*",
 "*.scss",
 "*.less"
 "*.css"
]

• 入口文件 index.tsx 引入样式文件 index.scss

import './index.scss'

[youluna]

赞同去掉 style.js

项目引入基础组件样式，有两种方式：

• 按需引入（之前主推）
• 全量引入（未来主推）

style.js的存在让项目全量引入样式，这种用法，出现了多份重复内容引入（工程上路径不一样，wepback识别为不同文件，无法去重）

[imsobear]

webpack-plugin-import 建议发一个大版本：

• /@ali/ice-.*/ 改为白名单配置
• pkg.componentConfig 移除掉，加到上述白名单里
• pkg.stylePath 继续保留

vite-plugin-component-style 一起修改，不需要发大版本

关于对 webpack-plugin-import 的依赖：

• plugin-fusion 里不应该依赖该插件，让 plugin-component/block 自己依赖更合理

[imsobear]

已完成