代码拉取完成,页面将自动刷新
构建 react npm package
的脚手架模板,基于 vite
。
使用项目模板(推荐)
git clone https://gitee.com/leopen/react-lib-boilerplate.git
cd react-lib-boilerplate
npm install
# run examples
npm run dev
# build lib
npm run build
# run test
npm run test
手动逐步安装(后续更新可能导致此安装过程缺少部分组件)
# Init by vite react-ts template
npm init vite@latest react-lib-boilerplate -- --template react-ts
cd react-lib-boilerplate
npm install
# Add test framework
## step 1: install jest for testing and a jest transformer: ts-jest
npm install --save-dev jest @types/jest ts-jest
## step 2:install some packages for testing react
npm install --save-dev @testing-library/jest-dom @testing-library/react
## step 3:install a package for mocking css
npm install --save-dev identity-obj-proxy
## step 4:config ts, ts-jest, see jest.config.js for detail
npx ts-jest config:init
## step 5:add test command, see package.json for detail
# Add eslint and prettier for code style checking and formatting
## step 1: install eslint
npm install --save-dev eslint
## step 2: init eslint
npx eslint --init
## step 3: support typescript (can be skipped if you selected typescript in step 2)
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
## step 4: support react (can be skipped if you selected react in step 2)
npm install --save-dev eslint-plugin-react
## step 5: config eslint, include .eslintrc.json and .eslintignore, see files for detail
## step 6: install prettier
npm install --save-dev prettier eslint-config-prettier
## step 7: config prettier, include .prettierrc and .prettierignore, see files for detail
## step 8: add prettier to eslint extends, see .eslintrc.json for detail
# Config for vite build lib, include vite.config.ts and package.json. see https://cn.vitejs.dev/guide/build.html#library-mode
# More, like install husky, do anything you like
暂无
React 17
编译后依然使用 React.createElement()
?vite
采用 Esbuild
用来编译 jsx tsx
文件,当前还没有特别好的方式来使用,所以使用了 React 16
的编译结果。但是可以自动注入 React
的引用,参考以下资料可以帮助您更好理解这个问题:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。