Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
42 changes: 31 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,51 @@
# react-cli
node 15+
react-typescript-router-mobx-redux-hook
```html
main 分支为 路由版本
redux 分支为 redux 结构
mobx 分支为 mobx 结构代码 补充中...
rematch 分支为reamatch 结构代码 补充中...
整体在维护中
```
> 切换到分支 redux 可以看到完整redux 搭建的代码

#### step1
```cmd
eg:
mv react-cli/tpl react-cli/projectName

eg
## step1
```cmd
把demo 文件改成自己需要的项目名,然后移动。后期会维护一步创建.
```
##### step1-1
```cmd
进入文件夹:
cd react-cli
```
##### step1-2
```cmd
改名
mv tpl candy-react
移动
```
##### step1-3
```cmd
移动到上一级
mv tpl ../
```
##### step1-4
```cmd
退出当前文件夹
cd ..
rm -rf react-cli
```

#### step2

## step2
```cmd
node -v
v14.15.3
yarn config get registry
yarn config set registry http://registry.npm.taobao.org/
```

#### step3
## step3
```cmd

yarn
yarn start
```
2 changes: 2 additions & 0 deletions my-com-types/build/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions my-com-types/build/index.js.LICENSE.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*!**********************!*\
!*** ./src/index.ts ***!
\**********************/

/*!************************!*\
!*** external "react" ***!
\************************/

/*!**********************************!*\
!*** ./src/components/index.tsx ***!
\**********************************/
38 changes: 38 additions & 0 deletions my-com-types/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "my-com-types",
"version": "1.1.0",
"description": "",
"main": "build/index.js",
"types": "dist/index.d.ts",
"scripts": {
"start": "NODE_ENV=development webpack --watch",
"build": "NODE_ENV=development webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"peerDependencies": {
"react": "^18.2.0"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.19.3",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"babel-loader": "^8.2.5",
"babel-preset-react-app": "^10.0.1",
"css-loader": "^6.7.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"style-loader": "^3.3.1",
"ts-loader": "^9.4.1",
"typescript": "^4.8.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"babel": {
"presets": [
"react-app"
]
}
}
10 changes: 10 additions & 0 deletions my-com-types/src/components/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React, { memo } from 'react';
interface Props{
}
const View : React.FC = (props: Props) =>{
return (
<div>这是ts react 组件</div>

)
}
export default memo(View);
1 change: 1 addition & 0 deletions my-com-types/src/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
declare module 'ts-com'
3 changes: 3 additions & 0 deletions my-com-types/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Tes from './components/index';

export default Tes;
17 changes: 17 additions & 0 deletions my-com-types/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"compilerOptions": {
"outDir": "./dist",
"module": "CommonJS",
"target": "ES2015",
"jsx": "react",
"declaration": true,
"esModuleInterop": true,
"removeComments": true,
},
"include": [
"src/**/*",
],
"exclude": [
"node_modules",
]
}
59 changes: 59 additions & 0 deletions my-com-types/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
const path = require('path');

module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
//编译的输入位置,是在项目目录下的src目录下的index.jsx,如果你使用纯js编写,那这个文件名当然就是index.js
entry: './src/index.ts',
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['.ts', '.tsx', '.js', '.json'],
},
//编译的输出设置
output: {
//编译后的入口文件(别人用你的包的时候,引用的文件的名字,一般都是index.js
//这样引用你的包的时候,直接就是 import MyComponent from 'my-component/build'就自动会定位到index.js.
filename: 'index.js',
//编译后的文件将被输出到哪个文件夹下 这里是当前项目目录下的build里面
path: path.resolve(__dirname, 'build'),
//意思是把我们的输出作为react组件
libraryTarget: 'commonjs2'
},
module: {
//简单理解为:在编译过程中遇到什么文件用什么工具/模块 来处理/编译 按照这样写即可.如果是ts编写,你还需要安装更多的组件.
rules: [
{
//编译时找js或者jsx的文件
test: /\.js|jsx/,
//不包含您这些文件夹/在遇到这些文件夹的时候,跳过.我们这里写了build是因为你编译过后的文件会在build文件夹里面,而编译过的文件你不能也不需要再编译了.
exclude: /(node_modules|build)/,
//当符合这样的文件格式和文件夹条件的时候,使用下面的编译组件和设置
use: {
//使用babel-loader
loader: 'babel-loader',
//使用babel-loader时候的设置
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.(ts|tsx)?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
//遇到css文件的时候
test: /\.css/,
//使用style-loader和css-loader处理
use: ['style-loader', 'css-loader']
},
]
},
optimization: {
minimize: true, // 开启代码压缩
},
//要排除哪些模块不打包呢?这个参数我不是很清楚,但是学来的时候就这样的,具体因为时间的原因我也没有测试.
externals: {
'react': 'commonjs react'
}
};
Loading