prescientmoon/solar-conflux
prescientmoon/solar-conflux
1
Fork 0
Code Activity

typescript(lunargame/client): added babel and webpack

Browse source 
Signed-off-by: prescientmoon <git@moonythm.dev>
This commit is contained in:
Matei Adriel 2019-07-05 14:20:26 +03:00 committed by prescientmoon
parent 848ea7cc3a
commit 1bd3144e49
Signed by: prescientmoon
SSH key fingerprint: SHA256:UUF9JT2s8Xfyv76b8ZuVL7XrmimH4o49p4b+iexbVH4
11 changed files with 9756 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
typescript/lunargame/client/.prettierignore Normal file
View file

@ -0,0 +1,6 @@
coverage
dist
docs
node_modules
*.html
*.md

7
typescript/lunargame/client/.prettierrc.json Normal file
View 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
View 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
View 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
View file

File diff suppressed because it is too large Load diff

35
typescript/lunargame/client/package.json Normal file
View 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": {}
}

17
typescript/lunargame/client/src/common/core/components/App.tsx Normal file
View file

@ -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
View 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
View 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
View 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
View 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()