Нужен ли мне Babel, если я хочу поддерживать JavaScript в своем проекте TypeScript React? (без КРА)
Следующий код представляет собой конфигурацию моего веб-пакета для моего проекта React, написанного на TypeScript.
module.exports = {
mode: 'development',
entry: ['./src/main.tsx'],
module: {
rules: [
{
// Only setup a rule for ts/tsx, but no rule for js/jsx yet.
test: /\.tsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
},
],
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
},
plugins: require('./webpack.plugins'),
resolve: {
extensions: ['.js', '.ts', '.json', '.jsx', '.tsx', '.css'],
alias: {
'react-dom': '@hot-loader/react-dom',
...require('./webpack.aliases'),
},
},
}
Я установил правило для расширения ts и tsx, но не установил правило js и jsx.
Мне интересно, нужно ли мне настраивать конфигурацию Babel и правило для загрузки js/jsx с помощью babel-loader, если я хочу поддерживать как TypeScript, так и JavaScript в моем проекте React, который не является проектом CRA?
Или, поскольку я уже настраиваю проект TypeScript, могу ли я просто использовать ts-loader для загрузки своих расширений js/jsx?
@Liam Я думаю, что загрузка JS с помощью ts-loader заставляет упакованный код JS компилироваться в целевую версию, которую я настраиваю в tsconfig. Если я не буду обрабатывать исходный код JS, возможно, эта версия не будет приемлемой для старого браузера?
Ваш ts-загрузчик настроен только для переноса файлов ts(x), поэтому он ничего не сделает с вашими файлами js.
Проблема скорее в jsx, чем в неподдерживаемых фичах. Трудно найти неподдерживаемую часто используемую функцию сейчас, когда IE мертв
@KonradLinkowski о да, ты прав! Но могу ли я загрузить jsx с помощью ts-loader? Или мне нужно установить правило для загрузки jsx с помощью babel-loader?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я только что нашел руководство по конвертации TS от Microsoft.
Короче говоря, они просто напрямую передают js/jsx вместе с ts/tsx в конвейер ts-loader, поскольку TypeScript также предлагает транспиляцию в более низкие версии ECMAScript и транспиляцию JSX с более коротким временем сборки в большинстве случаев.
module.exports = {
...
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},
module: {
rules: [
{ test: /\.(t|j)sx?$/, use: { loader: 'ts-loader' }, exclude: /node_modules/ }, // here
{ enforce: "pre", test: /\.js$/, exclude: /node_modules/, loader: "source-map-loader" }
]
},
...
}
Javascript — это язык, на который компилируется babel/typescript. Вам не нужен ts-loader для загрузки js, ts-loader загружает машинописный текст, отсюда и название. Вы пытались просто добавить несколько файлов js?