以下代碼是我用 TypeScript 撰寫的 React 專案的 webpack 配置，
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 規則。
我想知道如果我想在不是 CRA 專案的 React 專案中同時支持 TypeScript 和 JavaScript，我是否需要設定 Babel 配置和 js/jsx 由babel-loader 加載的規則？
或者，因為我已經在設定 ??TypeScript 專案，我可以只使用ts-loader來加載我的 js/jsx 擴展嗎？
uj5u.com熱心網友回復：
我剛剛從 Microsoft找到了TS 轉換指南。
簡而言之，他們只是直接將 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" }
]
},
...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/528410.html
上一篇：在ac宏中包裝可變引數
下一篇：如何阻止Vue編譯器處理靜態資源