publite/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Switched from snowpack to webpack (Preparing to add serviceworker)

Browse Source
This commit is contained in:
Dmitriy Shishkov 2021-07-31 21:18:16 +03:00
parent df91e5047c
commit c416354cfa
No known key found for this signature in database
GPG Key ID: 14358F96FCDD8060
12 changed files with 128 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.dockerignore
View File

@ -1,3 +1,5 @@
node_modules/ node_modules/
package-lock.json package-lock.json
build/ build/
pnpm-lock.yaml
.vscode

4
.gitignore vendored
View File

@ -1,3 +1,5 @@
node_modules/ node_modules/
package-lock.json package-lock.json
build/ build/
pnpm-lock.yaml
.vscode

27
package.json
View File

@ -1,18 +1,25 @@
{ {
"private": true,
"scripts": { "scripts": {
"dev": "SNOWPACK_PUBLIC_API_URL=http://localhost:8081 SNOWPACK_PUBLIC_BASE_URL=http://localhost:8080 snowpack dev", "build": "webpack --config ./webpack.config.prod.js",
"build": "snowpack build", "dev": "webpack serve --config ./webpack.config.dev.js --stats-error-details",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1",
"h": "cat ./webpack.config.dev.js"
}, },
"devDependencies": { "devDependencies": {
"@snowpack/plugin-typescript": "^1.2.1", "@svgr/webpack": "^5.5.0",
"@types/node": "^16.3.3", "@types/react": "^17.0.15",
"@types/react": "^17.0.14",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/snowpack-env": "^2.3.3", "copy-webpack-plugin": "^9.0.1",
"snowpack": "^3.8.0", "css-loader": "^6.2.0",
"snowpack-plugin-svgr": "^0.1.2", "esbuild-loader": "^2.13.1",
"typescript": "^4.3.5" "fork-ts-checker-webpack-plugin": "^6.2.13",
"style-loader": "^3.2.1",
"typescript": "^4.3.5",
"typescript-plugin-css-modules": "^3.4.0",
"webpack": "^5.46.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}, },
"dependencies": { "dependencies": {
"react": "^17.0.2", "react": "^17.0.2",

2
public/index.html
View File

@ -9,6 +9,6 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/dist/index.js"></script> <script type="module" src="/index.js"></script>
</body> </body>
</html> </html>

28
snowpack.config.js
View File

@ -1,28 +0,0 @@
// Snowpack Configuration File
// See all supported options: https://www.snowpack.dev/reference/configuration
/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
plugins: ["@snowpack/plugin-typescript", "snowpack-plugin-svgr"],
packageOptions: {
polyfillNode: true,
},
mount: {
public: "/",
src: "/dist",
},
optimize: {
// bundle: true,
},
routes: [
{ match: "routes", src: "robots.txt", dest: "/robots.txt" },
{ match: "routes", src: ".*", dest: "/index.html" },
],
devOptions: {
open: "none",
},
alias: {
"~": "./src",
},
exclude: ["**/node_modules/**/*", "**/*.test.*"],
};

5
src/constants.ts
View File

@ -1,2 +1,3 @@
export const API_URL = import.meta.env.SNOWPACK_PUBLIC_API_URL; export const API_URL = process.env.PUBLIC_API_URL;
export const BASE_URL = import.meta.env.SNOWPACK_PUBLIC_BASE_URL; // export const BASE_URL = process.env.PUBLIC_BASE_URL;
export const CACHE = "v1";

3
src/index.tsx
View File

@ -12,6 +12,3 @@ ReactDOM.render(
document.getElementById("root") document.getElementById("root")
); );
if (import.meta.hot) {
import.meta.hot.accept();
}

2
src/utils/api.ts
View File

@ -43,7 +43,7 @@ export const validateResponse = (content: unknown): content is BookT => {
if (content && typeof content === "object") if (content && typeof content === "object")
for (const key of requiredBookProps) for (const key of requiredBookProps)
if (!(key in content)) { if (!(key in content)) {
if (import.meta.env.NODE_ENV === "development") if (process.env.NODE_ENV === "development")
console.log(`${key} is not specified in server response`); console.log(`${key} is not specified in server response`);
return false; return false;
} }

13
tsconfig.json
View File

@ -1,17 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es6",
"strict": true,
"esModuleInterop": true, "esModuleInterop": true,
"skipLibCheck": true, "isolatedModules": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"lib": ["DOM"], "lib": ["DOM", "webworker"],
"module": "ES2020", "module": "ES2020",
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true,
"paths": { "paths": {
"~/*": ["./src/*"] "~/*": ["./src/*"]
} },
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "es6"
} }
} }

53
webpack.config.common.js Normal file
View File

@ -0,0 +1,53 @@
const path = require("path");
const webpack = require("webpack");
const CopyPlugin = require("copy-webpack-plugin");
const ForkTsCheckerPlugin = require("fork-ts-checker-webpack-plugin");
module.exports = {
entry: {
"index.js": "./src/index.tsx",
"sw.js": "./src/serviceWorker/index.ts",
},
output: {
path: path.resolve(__dirname, `./build/`),
clean: true,
filename: "[name]",
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "esbuild-loader",
options: {
loader: "tsx",
target: "es2015",
},
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.svg$/,
use: ["@svgr/webpack"],
},
],
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
alias: { "~": path.resolve(__dirname, "src/") },
},
plugins: [
new webpack.DefinePlugin({
"process.env.PUBLIC_API_URL": JSON.stringify(
"https://publitebackend.dmitriy.icu"
),
}),
new ForkTsCheckerPlugin(),
new CopyPlugin({
patterns: [{ from: "./public", to: "." }],
}),
],
};

22
webpack.config.dev.js Normal file
View File

@ -0,0 +1,22 @@
const path = require("path");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.common");
module.exports = {
...webpackConfig,
mode: "development",
watchOptions: { ignored: /node_modules/ },
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 8080,
hot: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("development"),
}),
...webpackConfig.plugins,
],
};

18
webpack.config.prod.js Normal file
View File

@ -0,0 +1,18 @@
const { ESBuildMinifyPlugin } = require("esbuild-loader");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.common");
module.exports = {
...webpackConfig,
optimization: {
minimizer: [new ESBuildMinifyPlugin()],
},
mode: "production",
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production"),
}),
...webpackConfig.plugins,
],
};