react项目vite怎么模块化
时间: 2023-06-25 10:06:01 浏览: 70
React项目使用Vite进行模块化的方法如下:
1. 安装Vite
```
npm install vite --save-dev
```
2. 配置Vite
在项目根目录下创建`vite.config.js`文件,并进行如下配置:
```javascript
export default {
build: {
target: 'es2015',
outDir: 'dist',
assetsDir: 'assets',
cssCodeSplit: true,
minify: 'terser'
}
}
```
其中,`target`设置为`es2015`,表示使用ES6模块化;`outDir`设置输出目录;`assetsDir`设置静态资源目录;`cssCodeSplit`设置为`true`,表示将CSS代码拆分成单独的文件;`minify`设置为`terser`,表示使用Terser进行代码压缩。
3. 编写代码
在React组件中,使用ES6的模块化语法进行导入和导出,例如:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return <h1>Hello, Vite!</h1>;
}
ReactDOM.render(<App />, document.getElementById('root'));
```
4. 运行项目
在终端中运行以下命令启动项目:
```
npm run dev
```
以上就是React项目使用Vite进行模块化的基本方法。