如何在 TypeScript 中为 css 模块设置汇总
How to setup rollup for css modules in TypeScript
我使用来自 npm 的 this plugin 在我的 Typescript React Class 中导入了 css 模块。
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"outDir": "build",
"jsx": "react",
"noImplicitAny": false,
"removeComments": true,
"sourceMap": false,
"module": "ESNext",
"allowJs": true,
"moduleResolution": "node",
"esModuleInterop": true,
"baseUrl": "src",
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"exclude": [
"node_modules/"
],
"include": [
"src/*"
]
}
我还在 src/ 文件夹中添加了以下模块文件:
modules.d.ts
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
它抑制了所有警告,我能够很好地测试我的代码。我有一个组件导入位于同一文件夹中的 css 模块:
- src
- components
- Text.tsx
- Text.module.css
因此我的组件包含以下导入行:
import css from './Text.module.css';
我现在想将我的代码转换为 commonjs,以便在其他代码中将其用作 React 模块。这是我的汇总配置:
package.json
"scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
rollup.config.js
import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
我能够 运行 yarn build
没有任何错误,但是当我查看构建的代码时,css 模块文件不再位于 Text.js 文件。下面是build生成的文件夹截图:
所有css已经移动到lib文件夹,在生成的Text.js文件中:
他们是保留文件结构的方法,还是以导入指向正确 css 文件的方式进行转译?
我看到了一些使用 webpack.config.js 的解决方法(运行ning eject
脚本),但是我不太容易使用它(因为它添加了很多文件和依赖项到项目,我不确定如何处理好所有事情。
非常感谢!
没关系,我明白了!我从 this post (with a little fix from this another one) 中找到了汇总配置文件的 preserveModules 标志。刚刚将我的 rollup.config.js 编辑为:
rollup.config.js
import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
preserveModules: true,
input: './src/index.ts',
output: [
{
dir: './build',
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
现在一切正常!
我使用来自 npm 的 this plugin 在我的 Typescript React Class 中导入了 css 模块。
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"outDir": "build",
"jsx": "react",
"noImplicitAny": false,
"removeComments": true,
"sourceMap": false,
"module": "ESNext",
"allowJs": true,
"moduleResolution": "node",
"esModuleInterop": true,
"baseUrl": "src",
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"exclude": [
"node_modules/"
],
"include": [
"src/*"
]
}
我还在 src/ 文件夹中添加了以下模块文件:
modules.d.ts
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
它抑制了所有警告,我能够很好地测试我的代码。我有一个组件导入位于同一文件夹中的 css 模块:
- src
- components
- Text.tsx
- Text.module.css
因此我的组件包含以下导入行:
import css from './Text.module.css';
我现在想将我的代码转换为 commonjs,以便在其他代码中将其用作 React 模块。这是我的汇总配置:
package.json
"scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
rollup.config.js
import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
我能够 运行 yarn build
没有任何错误,但是当我查看构建的代码时,css 模块文件不再位于 Text.js 文件。下面是build生成的文件夹截图:
所有css已经移动到lib文件夹,在生成的Text.js文件中:
他们是保留文件结构的方法,还是以导入指向正确 css 文件的方式进行转译?
我看到了一些使用 webpack.config.js 的解决方法(运行ning eject
脚本),但是我不太容易使用它(因为它添加了很多文件和依赖项到项目,我不确定如何处理好所有事情。
非常感谢!
没关系,我明白了!我从 this post (with a little fix from this another one) 中找到了汇总配置文件的 preserveModules 标志。刚刚将我的 rollup.config.js 编辑为:
rollup.config.js
import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
preserveModules: true,
input: './src/index.ts',
output: [
{
dir: './build',
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
现在一切正常!