I want to migrate from react-jsx react to typescript-tsx react. As I have many files to convert I want to do it gradually. I want to keep old react-jsx file and for new features in my application I use typescript, then I will convert old react-jsx files to tsx. Is there any way to compile both react-jsx with Babel and tsx together in bundle file in webpack?
Add a comment
|
1 Answer
Yes there is! In your webpack config you just need to specify different loaders for *.jsx and *.tsx files. In situations using both typescript and babel I tend to get typescript to preserve JSX, and output ES6 modules, then use Babel to deal with the JSX. Your .tsconfig would be something like:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"jsx": "preserve",
"allowJs": false,
"moduleResolution": "node",
"lib": [
"dom",
"es7"
]
}
}
And your webpack (assuming v2) loaders would be:
{
test: /\.jsx?$/,
use: [{
loader: "babel-loader",
}],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: [
{
loader: "babel-loader"
},
{
loader: "ts-loader"
}
]
}
