jsx文件重定向如何实现
时间: 2023-05-23 19:01:07 浏览: 73
您可以使用 Webpack 中的 babel-loader,将 JSX 文件转换为纯 JavaScript 文件,同时指定一个输出目录,将转换后的文件放在那里。另外,您还需要在 webpack.config.js 文件中配置 entry 和 output 属性。具体操作可参考以下代码:
webpack.config.js 文件:
```
module.exports = {
entry: './index.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
]
}
}
```
在上述配置中,我们使用 babel-loader 来解析 .jsx 文件,并且只将项目源代码中除了 node_modules 目录以外的文件作为转译对象。转换后的文件将被打包进 dist/bundle.js 文件中。
而在 index.jsx 文件中,您需要按照规范书写 JSX 代码,例如:
```
import React from 'react';
import ReactDOM from 'react-dom';
const HelloMessage = (props) => {
return <div>Hello {props.name}!</div>;
};
ReactDOM.render(<HelloMessage name="John" />, document.getElementById('root'));
```
其中,<HelloMessage /> 将被转换为 React.createElement('HelloMessage', null)的形式。
这样,您就可以顺利的将 JSX 文件重定向到纯 JavaScript 文件,并通过 Webpack 打包输出。