From 6c6d83baeba7289ffeff6c5ec1d90a8d411d2989 Mon Sep 17 00:00:00 2001 From: crupest Date: Mon, 1 Jun 2020 22:48:25 +0800 Subject: Migrate to yarn v2 . --- Timeline/ClientApp/.gitignore | 9 +++++--- Timeline/ClientApp/.yarnrc.yml | 1 + Timeline/ClientApp/README.md | 16 -------------- Timeline/ClientApp/package.json | 4 +++- Timeline/ClientApp/webpack.common.ts | 28 ++++++++++++------------- Timeline/ClientApp/webpack.config.dev.ts | 35 ++++++++++++++++++------------- Timeline/ClientApp/webpack.config.prod.ts | 31 +++++++++++++++------------ 7 files changed, 61 insertions(+), 63 deletions(-) create mode 100644 Timeline/ClientApp/.yarnrc.yml delete mode 100644 Timeline/ClientApp/README.md (limited to 'Timeline/ClientApp') diff --git a/Timeline/ClientApp/.gitignore b/Timeline/ClientApp/.gitignore index e7a6cf65..cf6c0813 100644 --- a/Timeline/ClientApp/.gitignore +++ b/Timeline/ClientApp/.gitignore @@ -2,8 +2,11 @@ # dependencies /node_modules -/.pnp -.pnp.js + +.yarn/* +!.yarn/cache +!.yarn/releases +!.yarn/plugins # testing /coverage @@ -24,4 +27,4 @@ yarn-error.log* .vscode -dist \ No newline at end of file +/dist \ No newline at end of file diff --git a/Timeline/ClientApp/.yarnrc.yml b/Timeline/ClientApp/.yarnrc.yml new file mode 100644 index 00000000..5614d154 --- /dev/null +++ b/Timeline/ClientApp/.yarnrc.yml @@ -0,0 +1 @@ +yarnPath: ".yarn/releases/yarn-berry.js" diff --git a/Timeline/ClientApp/README.md b/Timeline/ClientApp/README.md deleted file mode 100644 index 9b265493..00000000 --- a/Timeline/ClientApp/README.md +++ /dev/null @@ -1,16 +0,0 @@ -# Welcome to Timeline! - -[![Build Status](https://dev.azure.com/crupest-web/Timeline/_apis/build/status/crupest.Timeline-React?branchName=master)](https://dev.azure.com/crupest-web/Timeline/_build/latest?definitionId=8&branchName=master) -[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=crupest/Timeline-React)](https://dependabot.com) - -This is the first web app front-end of [me](https://github.com/crupest). - -It is written with [React](https://reactjs.org/) and [Typescript](https://www.typescriptlang.org/). - -The final product is hosting on my [Tencent Cloud](https://cloud.tencent.com/) Cloud Virtual Machine on https://www.crupest.xyz. - -Feel free to comment by opening an issue. - -### jibber-jabber - -I used to write the website with Angular, you can find the old project [here](https://github.com/crupest/Timeline-App), in which I build full unit tests and CI/CD. But I finally gave up for the complexity. Then I turned to flutter to build an Android app, which can be found [here](https://github.com/crupest/Timeline-Flutter). But as time passed by, it turned out that it is simpler than Angular but still very complicated. In the end, I got here and met React. First I use [Create React App](https://github.com/facebook/create-react-app) to bootstrap this and later turn to manually configured Webpack. I also adopt the [Material-UI](https://material-ui.com/). diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json index 11130ccb..f47749b0 100644 --- a/Timeline/ClientApp/package.json +++ b/Timeline/ClientApp/package.json @@ -19,6 +19,7 @@ "react-hot-loader": "^4.12.21", "react-i18next": "^11.5.0", "react-responsive": "^8.0.3", + "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "reactstrap": "^8.4.1", "regenerator-runtime": "^0.13.5", @@ -61,6 +62,7 @@ "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", "@types/react-responsive": "^8.0.2", + "@types/react-router": "^5.1.7", "@types/react-router-dom": "^5.1.5", "@types/reactstrap": "^8.4.2", "@types/webpack": "^4.41.14", @@ -85,7 +87,7 @@ "html-webpack-plugin": "^3.2.0", "html-webpack-template": "^6.2.0", "http-server": "^0.12.3", - "image-webpack-loader": "^6.0.0", + "pnp-webpack-plugin": "^1.6.4", "postcss-loader": "^3.0.0", "prettier": "^2.0.5", "sass": "^1.26.7", diff --git a/Timeline/ClientApp/webpack.common.ts b/Timeline/ClientApp/webpack.common.ts index 9e7da028..c4e95e54 100644 --- a/Timeline/ClientApp/webpack.common.ts +++ b/Timeline/ClientApp/webpack.common.ts @@ -1,11 +1,12 @@ import webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import autoprefixer from 'autoprefixer'; +import htmlWebpackTemplate from 'html-webpack-template'; export const commonRules: webpack.RuleSetRule[] = [ { test: /\.css$/, - use: ['style-loader', 'css-loader'] + use: ['style-loader', 'css-loader'], }, { test: /\.(scss)$/, @@ -15,13 +16,13 @@ export const commonRules: webpack.RuleSetRule[] = [ { loader: 'postcss-loader', options: { - plugins: function() { + plugins: function () { return [autoprefixer]; - } - } + }, + }, }, - 'sass-loader' - ] + 'sass-loader', + ], }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/i, @@ -29,19 +30,16 @@ export const commonRules: webpack.RuleSetRule[] = [ { loader: 'url-loader', options: { - limit: 8192 - } + limit: 8192, + }, }, - { - loader: 'image-webpack-loader' - } - ] - } + ], + }, ]; export const htmlCommonConfig: HtmlWebpackPlugin.Options = { inject: false, - template: require('html-webpack-template'), + template: htmlWebpackTemplate, appMountId: 'app', mobile: true, @@ -55,5 +53,5 @@ export const htmlCommonConfig: HtmlWebpackPlugin.Options = { `, - title: 'Timeline' + title: 'Timeline', }; diff --git a/Timeline/ClientApp/webpack.config.dev.ts b/Timeline/ClientApp/webpack.config.dev.ts index 869b963b..17c227b3 100644 --- a/Timeline/ClientApp/webpack.config.dev.ts +++ b/Timeline/ClientApp/webpack.config.dev.ts @@ -2,6 +2,7 @@ import path from 'path'; import webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; +import PnpWebpackPlugin from 'pnp-webpack-plugin'; import { commonRules, htmlCommonConfig } from './webpack.common'; @@ -17,16 +18,20 @@ const config: webpack.Configuration = { exclude: /node_modules/, loader: 'babel-loader', options: { - plugins: ['react-hot-loader/babel'] - } - } - ] + plugins: ['react-hot-loader/babel'], + }, + }, + ], }, resolve: { alias: { - 'react-dom': '@hot-loader/react-dom' + 'react-dom': '@hot-loader/react-dom', }, - extensions: ['*', '.js', '.jsx', '.ts', '.tsx'] + extensions: ['*', '.js', '.jsx', '.ts', '.tsx'], + plugins: [PnpWebpackPlugin], + }, + resolveLoader: { + plugins: [PnpWebpackPlugin.moduleLoader(module)], }, optimization: { runtimeChunk: 'single', @@ -36,16 +41,16 @@ const config: webpack.Configuration = { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', - chunks: 'all' - } - } - } + chunks: 'all', + }, + }, + }, }, output: { path: path.resolve(__dirname, 'dist/'), filename: '[name].[hash].js', chunkFilename: '[name].[hash].js', - publicPath: '/' + publicPath: '/', }, devServer: { contentBase: path.join(__dirname, 'public/'), @@ -53,16 +58,16 @@ const config: webpack.Configuration = { port: 3000, publicPath: 'http://localhost:3000/', historyApiFallback: true, - hotOnly: true + hotOnly: true, }, plugins: [ new HtmlWebpackPlugin({ ...htmlCommonConfig, - devServer: 'http://localhost:3000' + devServer: 'http://localhost:3000', }), new ForkTsCheckerWebpackPlugin(), - new webpack.HotModuleReplacementPlugin() - ] + new webpack.HotModuleReplacementPlugin(), + ], }; export default config; diff --git a/Timeline/ClientApp/webpack.config.prod.ts b/Timeline/ClientApp/webpack.config.prod.ts index 77ee7966..f7cb0374 100644 --- a/Timeline/ClientApp/webpack.config.prod.ts +++ b/Timeline/ClientApp/webpack.config.prod.ts @@ -4,6 +4,7 @@ import { CleanWebpackPlugin } from 'clean-webpack-plugin'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import CopyPlugin from 'copy-webpack-plugin'; +import PnpWebpackPlugin from 'pnp-webpack-plugin'; import { commonRules, htmlCommonConfig } from './webpack.common'; @@ -17,12 +18,16 @@ const config: webpack.Configuration = { { test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, - loader: 'babel-loader' - } - ] + loader: 'babel-loader', + }, + ], }, resolve: { - extensions: ['*', '.js', '.jsx', '.ts', '.tsx'] + extensions: ['*', '.js', '.jsx', '.ts', '.tsx'], + plugins: [PnpWebpackPlugin], + }, + resolveLoader: { + plugins: [PnpWebpackPlugin.moduleLoader(module)], }, optimization: { runtimeChunk: 'single', @@ -32,16 +37,16 @@ const config: webpack.Configuration = { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', - chunks: 'all' - } - } - } + chunks: 'all', + }, + }, + }, }, output: { path: path.resolve(__dirname, 'dist/'), filename: '[name].[hash].js', chunkFilename: '[name].[hash].js', - publicPath: '/' + publicPath: '/', }, plugins: [ new CleanWebpackPlugin(), @@ -50,10 +55,10 @@ const config: webpack.Configuration = { new CopyPlugin([ { from: path.resolve(__dirname, 'public/'), - to: path.resolve(__dirname, 'dist/') - } - ]) - ] + to: path.resolve(__dirname, 'dist/'), + }, + ]), + ], }; export default config; -- cgit v1.2.3