bundle player as an component

This commit is contained in:
Yanzhen Yu
2018-10-23 19:00:21 +08:00
parent 33b58c7717
commit 0d2479f5f1
5 changed files with 55 additions and 19 deletions

View File

@@ -1,13 +1,14 @@
{ {
"extends": "google", "extends": "google",
"parserOptions": { "parserOptions": {
"ecmaVersion": 7, "ecmaVersion": 8,
"sourceType": "module" "sourceType": "module"
}, },
"rules": { "rules": {
"require-jsdoc": "off", "require-jsdoc": "off",
"arrow-parens": "off", "arrow-parens": "off",
"object-curly-spacing": "off" "object-curly-spacing": "off",
"indent": "off"
}, },
"plugins": ["html"] "plugins": ["html"]
} }

2
.gitignore vendored
View File

@@ -6,3 +6,5 @@ yarn.lock
.vscode .vscode
temp temp
dist

View File

@@ -1,6 +1,6 @@
{ {
"name": "rrweb-player", "name": "rrweb-player",
"version": "0.1.0", "version": "0.2.0",
"devDependencies": { "devDependencies": {
"eslint": "^5.7.0", "eslint": "^5.7.0",
"eslint-config-google": "^0.11.0", "eslint-config-google": "^0.11.0",
@@ -19,9 +19,29 @@
}, },
"scripts": { "scripts": {
"build": "rollup -c", "build": "rollup -c",
"prepublishOnly": "npm run build",
"autobuild": "rollup -c -w", "autobuild": "rollup -c -w",
"dev": "run-p start:dev autobuild", "dev": "run-p start:dev autobuild",
"start": "sirv public", "start": "sirv public",
"start:dev": "sirv public --dev" "start:dev": "sirv public --dev"
} },
"description": "rrweb's replayer UI",
"main": "dist/index.js",
"module": "dist/index.mjs",
"files": [
"dist"
],
"repository": {
"type": "git",
"url": "git+https://github.com/rrweb-io/rrweb-player.git"
},
"keywords": [
"rrweb"
],
"author": "yanzhen@smartx.com",
"license": "MIT",
"bugs": {
"url": "https://github.com/rrweb-io/rrweb-player/issues"
},
"homepage": "https://github.com/rrweb-io/rrweb-player#readme"
} }

View File

@@ -1,16 +1,27 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset='utf8'> <meta charset='utf8'>
<meta name='viewport' content='width=device-width'> <meta name='viewport' content='width=device-width'>
<title>Svelte app</title> <title>dev panel</title>
<link rel='stylesheet' href='global.css'> <link rel='stylesheet' href='./global.css'>
<link rel='stylesheet' href='bundle.css'> <link rel="stylesheet" href="./bundle.css">
</head> </head>
<body> <body>
<script src='bundle.js'></script> <script src="./bundle.js"></script>
<script src="./bundle.events.js"></script>
<script>
const player = new rrwebPlayer({
target: document.body,
data: {
events,
},
});
</script>
</body> </body>
</html> </html>

View File

@@ -2,19 +2,20 @@ import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve'; import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs'; import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser'; import { terser } from 'rollup-plugin-terser';
import pkg from './package.json';
const production = !process.env.ROLLUP_WATCH; const production = !process.env.ROLLUP_WATCH;
export default { export default [
input: 'src/main.js', { file: pkg.module, format: 'es' },
output: { { file: pkg.main, format: 'iife', name: 'rrwebPlayer' },
sourcemap: true, { file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' },
format: 'iife', ].map(output => ({
name: 'app', input: 'src/Player.html',
file: 'public/bundle.js', output,
},
plugins: [ plugins: [
svelte({ svelte({
cascade: false,
// opt in to v3 behaviour today // opt in to v3 behaviour today
skipIntroByDefault: true, skipIntroByDefault: true,
nestedTransitions: true, nestedTransitions: true,
@@ -24,6 +25,7 @@ export default {
// we'll extract any component CSS out into // we'll extract any component CSS out into
// a separate file — better for performance // a separate file — better for performance
css: css => { css: css => {
css.write('dist/style.css');
css.write('public/bundle.css'); css.write('public/bundle.css');
}, },
}), }),
@@ -40,4 +42,4 @@ export default {
// instead of npm run dev), minify // instead of npm run dev), minify
production && terser(), production && terser(),
], ],
}; }));