搭建react项目常用依赖

脚手架

dva-cli

下载方式:npm install dva-cli -g
复制代码

创建项目

dva new <projectname>
复制代码

关于typescript

如果需要用到typescript来规范代码书写,首先将项目中src目录中的js文件改成typescript后缀的文件

1. 在根目录下新建tsconfig.json, 具体配置请移步typescript官网
2. 根目录新建tslint.json,具体配置看项目需要
复制代码

管理端项目

一般在管理端项目时,常用框架为antd,所以我们可已通过npm install antd --save-dev安装antd
管理端项目一般会用到dva的loading,但是dva脚手架工具创建项目时,没有自带dva-loading依赖,所以需要我我们自己下载:npm install dva-loading --save-dev
复制代码

依赖

通过脚手架工具创建项目后,我一般还会用到以下的一些依赖

react-helmet
复制代码

说明

这篇文章只是本人的随记,怕忘记。

转载于:https://juejin.im/post/5bd7c932e51d455eb109915e

React项目的开发过程中,集成持续集成(Continuous Integration, CI)环境如Karma可以帮助你在每次代码提交后自动运行测试,确保代码质量和稳定性。以下是基于Karma和Travis CI(一种常用的CI服务)搭建React项目的基本步骤: 1. **安装依赖**: - 安装Node.js和npm,因为Karma、Webpack(用于打)等都是构建工具,需要Node支持。 - 安装`karma-cli`和`webpack`:`npm install karma-cli webpack` 2. **配置 Karma:** - 创建一个`.karma.conf.js`文件,这是Karma的核心配置文件。在这里定义测试框架(如Mocha、Jest)、入口点、浏览器插件、 reporters(报告结果的方式)等。 ```javascript module.exports = { frameworks: ['react', 'mocha'], files: ['src/**/*.{js,jsx}'], // 测试源文件路径 preprocessors: { 'src/**/*': ['webpack'] }, reporters: ['progress', 'coverage'], coverageReporter: { type: 'html', dir: 'coverage/' }, browsers: ['ChromeHeadless'] }; ``` 3. **创建Webpack配置:** - 使用`webpack.config.js`配置模块打括处理React JSX语法,暴露entry point供Karma加载。 ```javascript module.exports = { entry: './src/index.js', output: { filename: '[name].bundle.js', path: __dirname + '/dist' }, resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /\.jsx?$/, use: 'babel-loader' } ] } }; ``` 4. **设置 `.travis.yml`:** - 如果使用Travis CI,添加该文件并配置基本的信息,比如语言、依赖项、以及触发构建的操作(如推送代码到master分支)。 ```yaml language: node_js node_js: - "14" before_install: - npm ci script: - npm run build && karma start ``` 5. **编写测试:** - 在`src`目录下创建测试文件,如`test/index.test.js`,使用对应的测试库(如Jest)对组件进行测试。 6. **连接GitHub或GitLab:** - 将Travis CI账户与你的GitHub仓库关联,这样每次有代码更新,都会触发CI构建过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值