typescript(lunargame/client): added babel and webpack
Signed-off-by: prescientmoon <git@moonythm.dev>
This commit is contained in:
parent
848ea7cc3a
commit
1bd3144e49
6
typescript/lunargame/client/.prettierignore
Normal file
6
typescript/lunargame/client/.prettierignore
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
coverage
|
||||||
|
dist
|
||||||
|
docs
|
||||||
|
node_modules
|
||||||
|
*.html
|
||||||
|
*.md
|
7
typescript/lunargame/client/.prettierrc.json
Normal file
7
typescript/lunargame/client/.prettierrc.json
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"trailingComma": "none",
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 80,
|
||||||
|
"tabWidth": 4,
|
||||||
|
"semi": false
|
||||||
|
}
|
6
typescript/lunargame/client/.vscode/settings.json
vendored
Normal file
6
typescript/lunargame/client/.vscode/settings.json
vendored
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"eslint.enable": true,
|
||||||
|
"editor.formatOnSave": true,
|
||||||
|
"prettier.eslintIntegration": true,
|
||||||
|
"explorer.autoReveal": false
|
||||||
|
}
|
17
typescript/lunargame/client/babel.config.js
Normal file
17
typescript/lunargame/client/babel.config.js
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
"@babel/preset-env",
|
||||||
|
"@babel/preset-react",
|
||||||
|
"@babel/preset-typescript"
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
"@babel/plugin-syntax-dynamic-import",
|
||||||
|
["@babel/plugin-proposal-decorators", { legacy: true }],
|
||||||
|
["@babel/plugin-proposal-class-properties", { loose: true }],
|
||||||
|
],
|
||||||
|
env: {
|
||||||
|
test: {
|
||||||
|
presets: [["@babel/preset-env", { targets: { node: "current" } }]],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
9525
typescript/lunargame/client/package-lock.json
generated
Normal file
9525
typescript/lunargame/client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
35
typescript/lunargame/client/package.json
Normal file
35
typescript/lunargame/client/package.json
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"name": "client",
|
||||||
|
"main": "src/main.ts",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "webpack-dev-server",
|
||||||
|
"build": "cross-env NODE_ENV=production webpack",
|
||||||
|
"build:dev": "webpack",
|
||||||
|
"typecheck": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.5.0",
|
||||||
|
"@babel/plugin-proposal-class-properties": "^7.5.0",
|
||||||
|
"@babel/plugin-proposal-decorators": "^7.4.4",
|
||||||
|
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
|
||||||
|
"@babel/plugin-transform-runtime": "^7.5.0",
|
||||||
|
"@babel/preset-env": "^7.5.0",
|
||||||
|
"@babel/preset-react": "^7.0.0",
|
||||||
|
"@babel/preset-typescript": "^7.3.3",
|
||||||
|
"babel-loader": "^8.0.6",
|
||||||
|
"css-loader": "^3.0.0",
|
||||||
|
"html-webpack-inline-source-plugin": "0.0.10",
|
||||||
|
"html-webpack-plugin": "^3.2.0",
|
||||||
|
"mini-css-extract-plugin": "^0.7.0",
|
||||||
|
"node-sass": "^4.12.0",
|
||||||
|
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||||
|
"sass-loader": "^7.1.0",
|
||||||
|
"style-loader": "^0.23.1",
|
||||||
|
"typescript": "^3.5.2",
|
||||||
|
"webpack": "^4.35.2",
|
||||||
|
"webpack-cli": "^3.3.5",
|
||||||
|
"webpack-dev-server": "^3.7.2",
|
||||||
|
"webpack-merge": "^4.2.1"
|
||||||
|
},
|
||||||
|
"dependencies": {}
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { useObservable } from 'rxjs-hooks'
|
||||||
|
import { interval } from 'rxjs'
|
||||||
|
import { map } from 'rxjs/operators'
|
||||||
|
|
||||||
|
export const App = () => {
|
||||||
|
const somenum = useObservable<number>($input => {
|
||||||
|
return interval(1000).pipe(map(val => val + 1))
|
||||||
|
}, 200)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1>This is the app component!</h1>
|
||||||
|
<span>some random rxjs counter => {somenum}</span>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
14
typescript/lunargame/client/src/index.html
Normal file
14
typescript/lunargame/client/src/index.html
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="theme-color" content="#091F35" />
|
||||||
|
<meta name="viewport" content="initial-scale=1.0" />
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
|
||||||
|
<title>LunarBox</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
5
typescript/lunargame/client/src/main.tsx
Normal file
5
typescript/lunargame/client/src/main.tsx
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
import { render } from 'react-dom'
|
||||||
|
import React from 'react'
|
||||||
|
import { App } from './common/core/components/App'
|
||||||
|
|
||||||
|
render(<App />, document.querySelector('#app'))
|
9
typescript/lunargame/client/tsconfig.json
Normal file
9
typescript/lunargame/client/tsconfig.json
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"jsx": "preserve"
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules"],
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
115
typescript/lunargame/client/webpack.config.js
Normal file
115
typescript/lunargame/client/webpack.config.js
Normal file
|
@ -0,0 +1,115 @@
|
||||||
|
const { resolve } = require("path")
|
||||||
|
const HtmlWebpackPlugin = require("html-webpack-plugin")
|
||||||
|
const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin")
|
||||||
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
|
||||||
|
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
|
||||||
|
const webpackMerge = require("webpack-merge")
|
||||||
|
|
||||||
|
const isProduction = process.env.NODE_ENV === "production"
|
||||||
|
|
||||||
|
const projectRoot = resolve(__dirname)
|
||||||
|
const sourceFolder = resolve(projectRoot, "src")
|
||||||
|
const buildFolder = resolve(projectRoot, "dist")
|
||||||
|
const htmlTemplateFile = resolve(sourceFolder, "index.html")
|
||||||
|
|
||||||
|
const babelRule = {
|
||||||
|
test: /\.(js|tsx?)$/,
|
||||||
|
use: "babel-loader",
|
||||||
|
}
|
||||||
|
|
||||||
|
const sassRule = {
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [
|
||||||
|
isProduction
|
||||||
|
? MiniCssExtractPlugin.loader
|
||||||
|
: {
|
||||||
|
loader: "style-loader",
|
||||||
|
options: {
|
||||||
|
singleton: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ loader: "css-loader" },
|
||||||
|
{
|
||||||
|
loader: "sass-loader",
|
||||||
|
options: {
|
||||||
|
includePaths: [sourceFolder],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseConfig = {
|
||||||
|
mode: "none",
|
||||||
|
entry: [ resolve(sourceFolder, "main")],
|
||||||
|
output: {
|
||||||
|
filename: "js/[name].js",
|
||||||
|
path: buildFolder,
|
||||||
|
publicPath: "/",
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [ babelRule, sassRule],
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: [".js", ".ts", ".tsx", ".scss"],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const devConfig = {
|
||||||
|
mode: "development",
|
||||||
|
plugins: [
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: htmlTemplateFile,
|
||||||
|
chunksSortMode: "dependency",
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
devtool: "inline-source-map",
|
||||||
|
devServer: {
|
||||||
|
historyApiFallback: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const prodConfig = {
|
||||||
|
mode: "production",
|
||||||
|
optimization: {
|
||||||
|
minimize: true,
|
||||||
|
nodeEnv: "production",
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: "css/[name].min.css",
|
||||||
|
}),
|
||||||
|
new OptimizeCssAssetsWebpackPlugin(),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: htmlTemplateFile,
|
||||||
|
minify: {
|
||||||
|
removeComments: true,
|
||||||
|
collapseWhitespace: true,
|
||||||
|
removeRedundantAttributes: true,
|
||||||
|
useShortDoctype: true,
|
||||||
|
removeEmptyAttributes: true,
|
||||||
|
removeStyleLinkTypeAttributes: true,
|
||||||
|
keepClosingSlash: true,
|
||||||
|
minifyJS: true,
|
||||||
|
minifyCSS: true,
|
||||||
|
minifyURLs: true
|
||||||
|
},
|
||||||
|
inject: true
|
||||||
|
}),
|
||||||
|
new HtmlWebpackInlineSourcePlugin()
|
||||||
|
],
|
||||||
|
devtool: "source-map"
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFinalConfig() {
|
||||||
|
if (process.env.NODE_ENV === "production") {
|
||||||
|
console.info("Running production config")
|
||||||
|
return webpackMerge(baseConfig, prodConfig)
|
||||||
|
}
|
||||||
|
|
||||||
|
console.info("Running development config")
|
||||||
|
return webpackMerge(baseConfig, devConfig)
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = getFinalConfig()
|
Loading…
Reference in a new issue