Я использую @teamsupercell/typings-for-css-modules-loader
для генерации типов TS для моих модулей SASS. Вывод выглядит примерно так:
declare namespace LoginRouteStylesScssModule {
export interface ILoginRouteStylesScss {
card: string;
emailForm: string;
info: string;
input: string;
}
}
declare const LoginRouteStylesScssModule: LoginRouteStylesScssModule.ILoginRouteStylesScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: LoginRouteStylesScssModule.ILoginRouteStylesScss;
};
export = LoginRouteStylesScssModule;
Это позволяет ему пройти tsc
. Тем не менее, Бабель говорит мне 'export =' is not supported by @babel/plugin-transform-typescript. Please consider using 'export <value>;'.
Я хочу просто игнорировать .d.ts
файлы, так как они предназначены для tsc
, а не для Webpack / Babel.
Я пытался exclude
в .babelrc
, exclude
и ignore
в webpack.config.js
и webpack.IgnorePlugin
, но ни один из них не работает. Как настроить Webpack или Babel, чтобы они игнорировались?
`webpack.config. js ':
const path = require('path');
const childProcess = require('child_process');
const webpack = require('webpack');
const APP_ROOT = path.resolve('./src');
module.exports = {
entry: {
index: path.resolve('./src/main.tsx'),
},
output: {
path: path.resolve('./public/js'),
publicPath: '/js/',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
include: [APP_ROOT],
exclude: [path.resolve('./node_modules')],
use: {
loader: 'babel-loader',
options: {},
},
},
{
test: /\.s?css$/,
include: [APP_ROOT],
exclude: [/node_modules/],
use: [
'@teamsupercell/typings-for-css-modules-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]',
},
},
},
'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve('./src/styles/imports/variables.scss'),
path.resolve('./src/styles/imports/mixins.scss'),
],
},
},
],
},
{
test: /\.png$/,
use: [
'file-loader?name=../css/sprites/[name].png',
],
},
],
},
resolve: {
modules: [APP_ROOT, path.resolve('./node_modules')],
extensions: ['.js', '.jsx', '.ts', '.tsx'],
alias: {
sprites: path.resolve('./public/css/sprites'),
},
},
optimization: {},
context: APP_ROOT,
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.DefinePlugin({
MODULE_CONFIG: null,
}),
new webpack.EnvironmentPlugin({
NODE_ENV_ACTUAL: process.env.NODE_ENV || null,
API_URL: process.env.API_URL || null,
ASSETS_URL: process.env.ASSETS_URL || null,
JS_VERSION: parseInt(
(childProcess.execSync('git rev-list --count master').toString()).trim(),
10,
),
}),
],
cache: true,
devtool: false,
watchOptions: {
ignored: [
path.resolve('./public'),
path.resolve('./src/styles/generated/**'),
path.resolve('./src/**/*.d.ts'),
],
},
};
babel.config.js
:
module.exports = {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: '3',
exclude: [
'babel-plugin-transform-async-to-generator',
'babel-plugin-transform-regenerator',
],
}],
'@babel/preset-typescript',
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
'@babel/plugin-proposal-do-expressions',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-optional-chaining',
/* Async/await increases file size by a lot.
["module:fast-async", {
"compiler": { "promises": true, "generators": false, "useRuntimeModule": true },
}],
["@babel/plugin-transform-modules-commonjs", {
"strictMode": false,
}], */
],
env: {
production: {
plugins: ['transform-react-remove-prop-types'],
},
},
};