diff --git a/client/package.json b/client/package.json new file mode 100644 index 0000000000000000000000000000000000000000..0dea95f38620f9b49ab261045acd4026583942b5 --- /dev/null +++ b/client/package.json @@ -0,0 +1,59 @@ +{ + "name": "client", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "build": "webpack", + "dev": "webpack-dev-server" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "@types/qs": "^6.9.3", + "@types/react": "^16.9.36", + "@types/react-dom": "^16.9.8", + "@types/react-redux": "^7.1.9", + "@types/react-router-dom": "^5.1.5", + "@types/react-swipe": "^6.0.0", + "@types/react-transition-group": "^4.4.0", + "@types/redux-logger": "^3.0.8", + "@types/redux-promise": "^0.5.29", + "antd": "^4.3.4", + "connected-react-router": "^6.8.0", + "immer": "^7.0.1", + "qs": "^6.9.4", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-redux": "^7.2.0", + "react-router-dom": "^5.2.0", + "react-swipe": "^6.0.4", + "react-transition-group": "^4.4.1", + "redux": "^4.0.5", + "redux-immer": "^1.0.5", + "redux-logger": "^3.0.6", + "redux-promise": "^0.6.0", + "redux-thunk": "^2.3.0" + }, + "devDependencies": { + "autoprefixer": "^9.8.0", + "css-loader": "^3.6.0", + "file-loader": "^6.0.0", + "html-webpack-plugin": "^4.3.0", + "less": "^3.11.3", + "less-loader": "^6.1.1", + "lib-flexible": "^0.3.2", + "postcss-loader": "^3.0.0", + "px2rem-loader": "^0.1.9", + "source-map-loader": "^1.0.0", + "style-loader": "^1.2.1", + "ts-import-plugin": "^1.6.6", + "ts-loader": "^7.0.5", + "typescript": "^3.9.5", + "url-loader": "^4.1.0", + "webpack": "^4.43.0", + "webpack-cli": "^3.3.11", + "webpack-dev-server": "^3.11.0" + } +} \ No newline at end of file diff --git a/client/src/index.html b/client/src/index.html new file mode 100644 index 0000000000000000000000000000000000000000..9fe3ea9734f26703b96f0331cf330cc4fd1979f2 --- /dev/null +++ b/client/src/index.html @@ -0,0 +1,23 @@ + + + + + + + + 珠峰课堂 + + + + +
+ + + \ No newline at end of file diff --git a/client/src/index.ts b/client/src/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..d58776cdacebaad64843b8317592eb67a4e91e2d --- /dev/null +++ b/client/src/index.ts @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +ReactDOM.render(( +

hello < /h1> +), document.getElementById('root')); \ No newline at end of file diff --git a/client/tsconfig.json b/client/tsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..371b289be5c97751e278c1a63779c96f0abe6f17 --- /dev/null +++ b/client/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "outDir": "./dist", + "sourceMap": true, + "noImplicitAny": true, + "module": "ESNext", + "target": "es5", + "jsx": "react", + "esModuleInterop":true + }, + "include": [ + "./src/**/*" + ] +} \ No newline at end of file diff --git a/client/webpack.config.js b/client/webpack.config.js new file mode 100644 index 0000000000000000000000000000000000000000..5ac1b7a81e155406c315039573e6063833fb6e02 --- /dev/null +++ b/client/webpack.config.js @@ -0,0 +1,105 @@ +const webpack = require('webpack'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const tsImportPluginFactory = require('ts-import-plugin') +const path = require('path'); +module.exports = { + mode: process.env.NODE_ENV == 'production' ? 'production' : 'development',//默认是开发模块 + entry: './src/index.tsx', + output: { + path: path.join(__dirname, 'dist'), + filename: 'bundle.js' + }, + devtool: 'source-map', + devServer: { + hot: true,//热更新插件 + contentBase: path.join(__dirname, 'dist'), + historyApiFallback: {//browserHistory的时候,刷新会报404. 自动重定向到index.html + index: './index.html' + } + }, + resolve: { + alias: { + "@": path.resolve(__dirname, 'src'), + "~": path.resolve(__dirname, 'node_modules') + }, + //当你加载一个文件的时候,没有指定扩展名的时候,会自动寻找哪些扩展名 + extensions: ['.ts', '.tsx', '.js', '.json'] + }, + module: { + rules: [ + { + test: /\.(j|t)sx?$/, + loader: 'ts-loader', + options: { + transpileOnly: true, + getCustomTransformers: () => ({ + before: [tsImportPluginFactory({ + "libraryName": 'antd', + "libraryDirectory": "es", + "style": "css" + })] + }), + compilerOptions: { + module: 'es2015' + } + }, + }, + { + test: /\.css$/, + use: ['style-loader', { + loader: 'css-loader', + options: { importLoaders: 0 } + }, { + loader: 'postcss-loader', + options: { + plugins: [ + require('autoprefixer') + ] + } + }, + { + loader: 'px2rem-loader', + options: { + remUnit: 75, + remPrecesion: 8 + } + }] + }, + { + test: /\.less$/, + use: ['style-loader', { + loader: 'css-loader', + options: { importLoaders: 0 } + }, + { + loader: 'postcss-loader', + options: { + plugins: [ + require('autoprefixer') + ] + } + }, + { + loader: 'px2rem-loader', + options: { + remUnit: 75, + remPrecesion: 8 + } + }, + 'less-loader' + ] + }, + { + test: /\.(jpg|png|gif|svg|jpeg)$/, + use: ['url-loader'] + } + ] + }, + plugins: [ + new HtmlWebpackPlugin({ + template: './src/index.html' + }), + //热更新插件 + new webpack.HotModuleReplacementPlugin() + ] +} \ No newline at end of file diff --git "a/day1/\345\255\246\344\271\240\346\200\273\347\273\223.md" "b/day1/\345\255\246\344\271\240\346\200\273\347\273\223.md" index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f786039c0688d8cedb8f7def743478371a394522 100644 --- "a/day1/\345\255\246\344\271\240\346\200\273\347\273\223.md" +++ "b/day1/\345\255\246\344\271\240\346\200\273\347\273\223.md" @@ -0,0 +1,3 @@ +### 初始化项目 +1、过了一遍项目所需的安装包,一般都习惯了用开源工程创,这种一步步来还真不熟悉 +2、react基础知识了解一点,但是工作中没搞过react项目,这次要认真搞下 \ No newline at end of file