mirror of
https://github.com/PaddiM8/kalker.git
synced 2025-01-31 17:09:13 +01: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/
|
||||
/public/build/
|
||||
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
.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",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public",
|
||||
"validate": "svelte-check"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^16.0.0",
|
||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||
"@rollup/plugin-typescript": "^6.0.0",
|
||||
"@tsconfig/svelte": "^1.0.0",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-check": "^1.0.0",
|
||||
"svelte-preprocess": "^4.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^3.9.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"sirv-cli": "^1.0.0",
|
||||
"vanilla-caret-js": "^1.0.1"
|
||||
}
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack",
|
||||
"dev": "webpack-dev-server --content-base public --hot",
|
||||
"start": "serve public -l 8080",
|
||||
"validate": "svelte-check"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.11.5",
|
||||
"@babel/plugin-transform-runtime": "^7.11.5",
|
||||
"@babel/preset-env": "^7.11.5",
|
||||
"@babel/runtime": "^7.11.2",
|
||||
"@types/mini-css-extract-plugin": "^0.9.0",
|
||||
"@types/node": "^14.14.7",
|
||||
"@types/optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"@types/terser-webpack-plugin": "^4.2.0",
|
||||
"@types/webpack": "^4.41.25",
|
||||
"@types/webpack-dev-server": "^3.11.1",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"babel-loader": "^8.1.0",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"css-loader": "^4.2.0",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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='stylesheet' href='/global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
<link rel="icon" type="image/png" href="/favicon.png">
|
||||
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
<link rel="stylesheet" href="/build/bundle.css">
|
||||
<script defer src="/build/bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Please enable JavaScript to view this application.</noscript>
|
||||
</body>
|
||||
</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";
|
||||
</script>
|
||||
|
||||
<Calculator></Calculator>
|
||||
<Calculator />
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
props: {
|
||||
name: 'world'
|
||||
}
|
||||
target: document.body
|
||||
});
|
||||
|
||||
export default app;
|
||||
@ -1,6 +1,22 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
|
||||
"compilerOptions": {
|
||||
"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…
Reference in New Issue
Block a user