mirror of
https://github.com/PaddiM8/kalker.git
synced 2025-06-23 19:21:26 +02:00
Moved from Rollup to Webpack in kalk_web
This commit is contained in:
PaddiM8
parent
e19f8b2ff2
commit
489cdd14a4
3
kalk_web/.gitignore
vendored
3
kalk_web/.gitignore
vendored
@ -1,4 +1,5 @@
|
|||||||
/node_modules/
|
/node_modules/
|
||||||
/public/build/
|
/public/build/
|
||||||
|
yarn.lock
|
||||||
|
package-lock.json
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|||||||
11004
kalk_web/package-lock.json
generated
11004
kalk_web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,30 +1,49 @@
|
|||||||
{
|
{
|
||||||
"name": "svelte-app",
|
"private": true,
|
||||||
"version": "1.0.0",
|
"scripts": {
|
||||||
"scripts": {
|
"build": "cross-env NODE_ENV=production webpack",
|
||||||
"build": "rollup -c",
|
"dev": "webpack-dev-server --content-base public --hot",
|
||||||
"dev": "rollup -c -w",
|
"start": "serve public -l 8080",
|
||||||
"start": "sirv public",
|
"validate": "svelte-check"
|
||||||
"validate": "svelte-check"
|
},
|
||||||
},
|
"devDependencies": {
|
||||||
"devDependencies": {
|
"@babel/core": "^7.11.5",
|
||||||
"@rollup/plugin-commonjs": "^16.0.0",
|
"@babel/plugin-transform-runtime": "^7.11.5",
|
||||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
"@babel/preset-env": "^7.11.5",
|
||||||
"@rollup/plugin-typescript": "^6.0.0",
|
"@babel/runtime": "^7.11.2",
|
||||||
"@tsconfig/svelte": "^1.0.0",
|
"@types/mini-css-extract-plugin": "^0.9.0",
|
||||||
"rollup": "^2.3.4",
|
"@types/node": "^14.14.7",
|
||||||
"rollup-plugin-css-only": "^3.1.0",
|
"@types/optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||||
"rollup-plugin-livereload": "^2.0.0",
|
"@types/terser-webpack-plugin": "^4.2.0",
|
||||||
"rollup-plugin-svelte": "^7.0.0",
|
"@types/webpack": "^4.41.25",
|
||||||
"rollup-plugin-terser": "^7.0.0",
|
"@types/webpack-dev-server": "^3.11.1",
|
||||||
"svelte": "^3.0.0",
|
"autoprefixer": "^9.8.6",
|
||||||
"svelte-check": "^1.0.0",
|
"babel-loader": "^8.1.0",
|
||||||
"svelte-preprocess": "^4.0.0",
|
"clean-webpack-plugin": "^3.0.0",
|
||||||
"tslib": "^2.0.0",
|
"cross-env": "^7.0.2",
|
||||||
"typescript": "^3.9.3"
|
"css-loader": "^4.2.0",
|
||||||
},
|
"mini-css-extract-plugin": "^0.9.0",
|
||||||
"dependencies": {
|
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||||
"sirv-cli": "^1.0.0",
|
"postcss-loader": "^3.0.0",
|
||||||
"vanilla-caret-js": "^1.0.1"
|
"sass": "^1.26.10",
|
||||||
}
|
"sass-loader": "^10.0.1",
|
||||||
|
"svelte": "^3.29.7",
|
||||||
|
"svelte-check": "^1.1.15",
|
||||||
|
"svelte-loader-hot": "^0.3.1",
|
||||||
|
"svelte-preprocess": "^4.6.1",
|
||||||
|
"terser-webpack-plugin": "^4.2.3",
|
||||||
|
"ts-loader": "^8.0.2",
|
||||||
|
"ts-node": "^9.0.0",
|
||||||
|
"typescript": "^4.1.2",
|
||||||
|
"webpack": "^4.44.1",
|
||||||
|
"webpack-cli": "^3.3.12",
|
||||||
|
"webpack-dev-server": "^3.11.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@paddim8/kalk": "^1.4.0",
|
||||||
|
"serve": "^11.3.2"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"defaults"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,18 +1,17 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'>
|
<meta charset="utf-8">
|
||||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
|
||||||
<title>Svelte app</title>
|
<title>Svelte app</title>
|
||||||
|
|
||||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
<link rel="icon" type="image/png" href="/favicon.png">
|
||||||
<link rel='stylesheet' href='/global.css'>
|
|
||||||
<link rel='stylesheet' href='/build/bundle.css'>
|
|
||||||
|
|
||||||
<script defer src='/build/bundle.js'></script>
|
<link rel="stylesheet" href="/build/bundle.css">
|
||||||
</head>
|
<script defer src="/build/bundle.js"></script>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
</body>
|
<noscript>Please enable JavaScript to view this application.</noscript>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,83 +0,0 @@
|
|||||||
import svelte from 'rollup-plugin-svelte';
|
|
||||||
import commonjs from '@rollup/plugin-commonjs';
|
|
||||||
import resolve from '@rollup/plugin-node-resolve';
|
|
||||||
import livereload from 'rollup-plugin-livereload';
|
|
||||||
import { terser } from 'rollup-plugin-terser';
|
|
||||||
import sveltePreprocess from 'svelte-preprocess';
|
|
||||||
import typescript from '@rollup/plugin-typescript';
|
|
||||||
import css from 'rollup-plugin-css-only';
|
|
||||||
|
|
||||||
const production = !process.env.ROLLUP_WATCH;
|
|
||||||
|
|
||||||
function serve() {
|
|
||||||
let server;
|
|
||||||
|
|
||||||
function toExit() {
|
|
||||||
if (server) server.kill(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
writeBundle() {
|
|
||||||
if (server) return;
|
|
||||||
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
|
|
||||||
stdio: ['ignore', 'inherit', 'inherit'],
|
|
||||||
shell: true
|
|
||||||
});
|
|
||||||
|
|
||||||
process.on('SIGTERM', toExit);
|
|
||||||
process.on('exit', toExit);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
input: 'src/main.ts',
|
|
||||||
output: {
|
|
||||||
sourcemap: true,
|
|
||||||
format: 'iife',
|
|
||||||
name: 'app',
|
|
||||||
file: 'public/build/bundle.js'
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
svelte({
|
|
||||||
preprocess: sveltePreprocess(),
|
|
||||||
compilerOptions: {
|
|
||||||
// enable run-time checks when not in production
|
|
||||||
dev: !production
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
// we'll extract any component CSS out into
|
|
||||||
// a separate file - better for performance
|
|
||||||
css({ output: 'bundle.css' }),
|
|
||||||
|
|
||||||
// If you have external dependencies installed from
|
|
||||||
// npm, you'll most likely need these plugins. In
|
|
||||||
// some cases you'll need additional configuration -
|
|
||||||
// consult the documentation for details:
|
|
||||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
|
||||||
resolve({
|
|
||||||
browser: true,
|
|
||||||
dedupe: ['svelte']
|
|
||||||
}),
|
|
||||||
commonjs(),
|
|
||||||
typescript({
|
|
||||||
sourceMap: !production,
|
|
||||||
inlineSources: !production
|
|
||||||
}),
|
|
||||||
|
|
||||||
// In dev mode, call `npm run start` once
|
|
||||||
// the bundle has been generated
|
|
||||||
!production && serve(),
|
|
||||||
|
|
||||||
// Watch the `public` directory and refresh the
|
|
||||||
// browser on changes when not in production
|
|
||||||
!production && livereload('public'),
|
|
||||||
|
|
||||||
// If we're building for production (npm run build
|
|
||||||
// instead of npm run dev), minify
|
|
||||||
production && terser()
|
|
||||||
],
|
|
||||||
watch: {
|
|
||||||
clearScreen: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -2,4 +2,4 @@
|
|||||||
import Calculator from "./Calculator.svelte";
|
import Calculator from "./Calculator.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Calculator></Calculator>
|
<Calculator />
|
||||||
|
|||||||
@ -1,10 +1,7 @@
|
|||||||
import App from './App.svelte';
|
import App from './App.svelte';
|
||||||
|
|
||||||
const app = new App({
|
const app = new App({
|
||||||
target: document.body,
|
target: document.body
|
||||||
props: {
|
|
||||||
name: 'world'
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default app;
|
export default app;
|
||||||
|
|||||||
@ -1,6 +1,22 @@
|
|||||||
{
|
{
|
||||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
"include": ["src/**/*"],
|
||||||
|
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
|
||||||
"include": ["src/**/*"],
|
"compilerOptions": {
|
||||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
|
"moduleResolution": "node",
|
||||||
}
|
"target": "es2017",
|
||||||
|
"importsNotUsedAsValues": "remove",
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {},
|
||||||
|
"types": [
|
||||||
|
"svelte",
|
||||||
|
"svelte/store",
|
||||||
|
"svelte/motion",
|
||||||
|
"svelte/transition",
|
||||||
|
"svelte/animate",
|
||||||
|
"svelte/easing"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
241
kalk_web/webpack.config.ts
Normal file
241
kalk_web/webpack.config.ts
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
||||||
|
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
|
||||||
|
import TerserPlugin from 'terser-webpack-plugin';
|
||||||
|
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
|
||||||
|
import Preprocess from 'svelte-preprocess';
|
||||||
|
import webpack from 'webpack';
|
||||||
|
import WebpackDevServer from 'webpack-dev-server';
|
||||||
|
|
||||||
|
const mode =
|
||||||
|
(process.env.NODE_ENV as 'production' | 'development') || 'development';
|
||||||
|
const prod = mode === 'production';
|
||||||
|
const sveltePath = path.resolve('node_modules', 'svelte');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Should source maps be generated alongside your production bundle? This will expose your raw source code, so it's
|
||||||
|
* disabled by default.
|
||||||
|
*/
|
||||||
|
const sourceMapsInProduction = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Should we run Babel on builds? This will transpile your bundle in order to work on your target browsers (see the
|
||||||
|
* `browserslist` property in your package.json), but will impact bundle size and build speed.
|
||||||
|
*/
|
||||||
|
const useBabel = true;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Should we run Babel on development builds? If set to `false`, only production builds will be transpiled. If you're
|
||||||
|
* only testing in modern browsers and don't need transpiling in development, it is recommended to keep this disabled
|
||||||
|
* as it will greatly speed up your builds.
|
||||||
|
*/
|
||||||
|
const useBabelInDevelopment = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* One or more stylesheets to compile and add to the beginning of the bundle. By default, SASS, SCSS and CSS files are
|
||||||
|
* supported. The order of this array is important, as the order of outputted styles will match. Svelte component
|
||||||
|
* styles will always appear last in the bundle.
|
||||||
|
*/
|
||||||
|
let stylesheets = ['./src/styles/index.scss'];
|
||||||
|
|
||||||
|
const config: webpack.Configuration & WebpackDevServer.Configuration = {
|
||||||
|
entry: {
|
||||||
|
bundle: [
|
||||||
|
// Note: Paths in the `stylesheets` variable will be added here automatically
|
||||||
|
'./src/main.ts',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
// Note: Additional aliases will be loaded automatically from `tsconfig.compilerOptions.paths`
|
||||||
|
svelte: path.resolve('node_modules', 'svelte'),
|
||||||
|
},
|
||||||
|
extensions: ['.mjs', '.js', '.ts', '.svelte'],
|
||||||
|
mainFields: ['svelte', 'browser', 'module', 'main'],
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
publicPath: '/build/',
|
||||||
|
path: __dirname + '/public/build',
|
||||||
|
filename: '[name].js',
|
||||||
|
chunkFilename: '[name].[id].js',
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.svelte$/,
|
||||||
|
use: {
|
||||||
|
loader: 'svelte-loader-hot',
|
||||||
|
options: {
|
||||||
|
dev: !prod,
|
||||||
|
emitCss: prod,
|
||||||
|
hotReload: !prod,
|
||||||
|
hotOptions: {
|
||||||
|
// List of options and defaults: https://www.npmjs.com/package/svelte-loader-hot#usage
|
||||||
|
noPreserveState: false,
|
||||||
|
optimistic: true,
|
||||||
|
},
|
||||||
|
preprocess: Preprocess({
|
||||||
|
scss: true,
|
||||||
|
postcss: {
|
||||||
|
plugins: [require('autoprefixer')],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(scss|sass)$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: MiniCssExtractPlugin.loader,
|
||||||
|
options: {
|
||||||
|
hmr: !prod,
|
||||||
|
sourceMap: !prod || sourceMapsInProduction,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'css-loader',
|
||||||
|
{
|
||||||
|
loader: 'postcss-loader',
|
||||||
|
options: {
|
||||||
|
plugins: [require('autoprefixer')],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'sass-loader',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: MiniCssExtractPlugin.loader,
|
||||||
|
options: {
|
||||||
|
hmr: !prod,
|
||||||
|
sourceMap: !prod || sourceMapsInProduction,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'css-loader',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.ts$/,
|
||||||
|
use: 'ts-loader',
|
||||||
|
exclude: /node_modules/,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
hot: true,
|
||||||
|
stats: 'minimal',
|
||||||
|
contentBase: 'public',
|
||||||
|
watchContentBase: true,
|
||||||
|
},
|
||||||
|
mode,
|
||||||
|
plugins: [
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: '[name].css',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
optimization: {
|
||||||
|
minimizer: [],
|
||||||
|
},
|
||||||
|
devtool: prod && !sourceMapsInProduction ? false : 'source-map',
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add stylesheets to the build
|
||||||
|
if (Array.isArray(stylesheets) || typeof stylesheets === 'string') {
|
||||||
|
if (!Array.isArray(stylesheets)) {
|
||||||
|
stylesheets = [stylesheets];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make sure our entry bundle is in the correct format
|
||||||
|
if (typeof config.entry === 'object' && !Array.isArray(config.entry)) {
|
||||||
|
if (typeof config.entry.bundle !== 'undefined') {
|
||||||
|
// Convert the bundle to an array if necessary
|
||||||
|
if (!Array.isArray(config.entry.bundle)) {
|
||||||
|
config.entry.bundle = [config.entry.bundle];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add to the beginning of the bundle using unshift
|
||||||
|
config.entry.bundle.unshift.apply(
|
||||||
|
config.entry.bundle,
|
||||||
|
stylesheets
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load path mapping from tsconfig
|
||||||
|
const tsconfigPath = path.resolve(__dirname, 'tsconfig.json');
|
||||||
|
const tsconfig = require('fs').existsSync(tsconfigPath) ? require(tsconfigPath) : {};
|
||||||
|
|
||||||
|
if ('compilerOptions' in tsconfig && 'paths' in tsconfig.compilerOptions) {
|
||||||
|
const aliases = tsconfig.compilerOptions.paths;
|
||||||
|
for (const alias in aliases) {
|
||||||
|
const paths = aliases[alias].map((p: string) => path.resolve(__dirname, p));
|
||||||
|
|
||||||
|
// Our tsconfig uses glob path formats, whereas webpack just wants directories
|
||||||
|
// We'll need to transform the glob format into a format acceptable to webpack
|
||||||
|
const wpAlias = alias.replace(/(\\|\/)\*$/, '');
|
||||||
|
const wpPaths = paths.map((p: string) => p.replace(/(\\|\/)\*$/, ''));
|
||||||
|
|
||||||
|
if (!(wpAlias in config.resolve.alias) && wpPaths.length) {
|
||||||
|
config.resolve.alias[wpAlias] = wpPaths.length > 1 ? wpPaths : wpPaths[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// These options should only apply to production builds
|
||||||
|
if (prod) {
|
||||||
|
// Clean the build directory for production builds
|
||||||
|
config.plugins.push(new CleanWebpackPlugin());
|
||||||
|
|
||||||
|
// Minify CSS
|
||||||
|
config.optimization.minimizer.push(
|
||||||
|
new OptimizeCSSAssetsPlugin({
|
||||||
|
cssProcessorOptions: {
|
||||||
|
map: sourceMapsInProduction
|
||||||
|
? {
|
||||||
|
inline: false,
|
||||||
|
annotation: true,
|
||||||
|
}
|
||||||
|
: false,
|
||||||
|
},
|
||||||
|
cssProcessorPluginOptions: {
|
||||||
|
preset: [
|
||||||
|
'default',
|
||||||
|
{
|
||||||
|
discardComments: {
|
||||||
|
removeAll: !sourceMapsInProduction,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Minify and treeshake JS
|
||||||
|
config.optimization.minimizer.push(
|
||||||
|
new TerserPlugin({
|
||||||
|
sourceMap: sourceMapsInProduction,
|
||||||
|
extractComments: false,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add babel if enabled
|
||||||
|
if (useBabel && (prod || useBabelInDevelopment)) {
|
||||||
|
config.module.rules.unshift({
|
||||||
|
test: /\.(?:svelte|m?js)$/,
|
||||||
|
include: [path.resolve(__dirname, 'src'), path.dirname(sveltePath)],
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
sourceType: 'unambiguous',
|
||||||
|
presets: ['@babel/preset-env'],
|
||||||
|
plugins: ['@babel/plugin-transform-runtime'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default config;
|
||||||
Loading…
x
Reference in New Issue
Block a user