-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Migrate Simple example To Vite Instead Of Webpack For Faster Development #5857
Changes from all commits
c46fba8
9703c9a
182ea34
06d4b3b
1073bd2
adb5278
e6a1f4d
7f17f75
8395b3d
a1c7e2c
ebed514
d7561c6
7b730d0
c26e553
bcd73ae
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"presets": ["@babel/preset-react"] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
node_modules | ||
.DS_Store | ||
dist | ||
dist-ssr | ||
*.local |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>React Admin</title> | ||
<style> | ||
body { | ||
margin: 0; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script>window.global = window</script> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why do we need this for webpack? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is needed for one of our dependency, can't remember which one though. Not related to webpack |
||
<script type="module" src="/src/index.tsx"></script> | ||
<!-- This script adds the Roboto font to our project. For more detail go to this site: http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 --> | ||
<script> | ||
var WebFontConfig = { | ||
google: { families: ['Roboto:300,400,500,700:latin'] } | ||
}; | ||
(function () { | ||
var wf = document.createElement('script'); | ||
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; | ||
wf.type = 'text/javascript'; | ||
wf.async = 'true'; | ||
var s = document.getElementsByTagName('script')[0]; | ||
s.parentNode.insertBefore(wf, s); | ||
})(); | ||
</script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,49 +1,36 @@ | ||
{ | ||
"name": "simple", | ||
"private": true, | ||
"version": "3.0.0", | ||
"description": "", | ||
"main": "index.html", | ||
"scripts": { | ||
"dev": "./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development", | ||
"start": "USE_ALIAS=true ./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development", | ||
"serve": "./node_modules/.bin/serve --listen 8080 ./dist", | ||
"build": "./node_modules/.bin/webpack-cli --color --mode development --hide-modules true" | ||
}, | ||
"author": "", | ||
"license": "MIT", | ||
"devDependencies": { | ||
"@babel/cli": "^7.10.5", | ||
"@babel/core": "^7.11.4", | ||
"@babel/plugin-proposal-class-properties": "^7.10.4", | ||
"@babel/plugin-proposal-object-rest-spread": "^7.11.0", | ||
"@babel/plugin-syntax-dynamic-import": "^7.8.3", | ||
"@babel/preset-env": "^7.11.0", | ||
"@babel/preset-react": "^7.10.4", | ||
"@babel/preset-typescript": "^7.10.4", | ||
"babel-loader": "^8.0.4", | ||
"html-loader": "~1.3.0", | ||
"html-webpack-plugin": "~4.3.0", | ||
"ignore-not-found-export-plugin": "^1.0.1", | ||
"serve": "^10.1.2", | ||
"style-loader": "~1.2.1", | ||
"wait-on": "^3.2.0", | ||
"webpack": "~4.5.0", | ||
"webpack-bundle-analyzer": "^3.3.2", | ||
"webpack-cli": "~2.0.13", | ||
"webpack-dev-server": "~3.1.11" | ||
}, | ||
"dependencies": { | ||
"@babel/polyfill": "^7.10.4", | ||
"@material-ui/core": "^4.11.2", | ||
"@material-ui/icons": "^4.11.2", | ||
"ra-data-fakerest": "^3.9.0", | ||
"ra-i18n-polyglot": "^3.9.0", | ||
"ra-input-rich-text": "^3.9.0", | ||
"ra-language-english": "^3.9.0", | ||
"ra-language-french": "^3.9.0", | ||
"react": "^17.0.0", | ||
"react-admin": "^3.9.0", | ||
"react-dom": "^17.0.0" | ||
} | ||
"name": "simple", | ||
"version": "0.0.0", | ||
"scripts": { | ||
"dev": "./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development", | ||
"start": "vite", | ||
fzaninotto marked this conversation as resolved.
Show resolved
Hide resolved
|
||
"build": "vite build", | ||
"serve": "vite preview" | ||
}, | ||
"dependencies": { | ||
"@material-ui/core": "^4.11.2", | ||
"@material-ui/icons": "^4.11.2", | ||
"ra-data-fakerest": "^3.9.0", | ||
"ra-i18n-polyglot": "^3.9.0", | ||
"ra-input-rich-text": "^3.9.0", | ||
"ra-language-english": "^3.9.0", | ||
"ra-language-french": "^3.9.0", | ||
"react": "^17.0.0", | ||
"react-admin": "^3.9.0", | ||
"react-dom": "^17.0.0" | ||
}, | ||
"devDependencies": { | ||
"@babel/preset-react": "^7.12.10", | ||
"@vitejs/plugin-react-refresh": "^1.2.2", | ||
"ts-loader": "^8.0.14", | ||
"html-loader": "~1.3.0", | ||
"html-webpack-plugin": "~4.3.0", | ||
"ignore-not-found-export-plugin": "^1.0.1", | ||
"style-loader": "~1.2.1", | ||
"typescript": "^4.1.3", | ||
"vite": "^2.0.0-beta.62", | ||
"webpack": "~4.5.0", | ||
"webpack-cli": "~2.0.13", | ||
"webpack-dev-server": "~3.1.11" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"infiniteLoopProtection": true, | ||
"hardReloadOnChange": false, | ||
"view": "browser", | ||
"template": "node", | ||
"container": { | ||
"node": "14" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"compilerOptions": { | ||
"baseUrl": ".", | ||
"outDir": "lib", | ||
"rootDir": "src", | ||
"declaration": true, | ||
"allowJs": false, | ||
"jsx": "react", | ||
"lib": [ | ||
"es2017", | ||
"dom" | ||
], | ||
"moduleResolution": "node", | ||
"allowSyntheticDefaultImports": true, | ||
"esModuleInterop": true, | ||
"skipLibCheck": true | ||
}, | ||
"exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js"], | ||
"include": ["src"] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import reactRefresh from '@vitejs/plugin-react-refresh'; | ||
import path from 'path'; | ||
|
||
/** | ||
* https://vitejs.dev/config/ | ||
* @type { import('vite').UserConfig } | ||
*/ | ||
export default { | ||
plugins: [reactRefresh()], | ||
alias: [ | ||
{ | ||
find: /^react-admin$/, | ||
replacement: path.resolve( | ||
__dirname, | ||
'../../packages/react-admin/src' | ||
), | ||
}, | ||
{ | ||
find: /^ra-(.*)$/, | ||
replacement: path.resolve(__dirname, '../../packages/ra-$1/src'), | ||
}, | ||
{ | ||
find: /^@material-ui\/icons\/(.*)/, | ||
replacement: '@material-ui/icons/esm/$1', | ||
}, | ||
{ | ||
find: /^@material-ui\/core\/(.+)/, | ||
replacement: '@material-ui/core/es/$1', | ||
}, | ||
{ | ||
find: /^@material-ui\/core$/, | ||
replacement: '@material-ui/core/es', | ||
}, | ||
], | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why did you change that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because the old values didn't provide any value AFAIK. Besides,
minimum-scale
can be an accessibility issue for browsers that still respect them (those I use don't actually)