Skip to content
This repository was archived by the owner on Mar 8, 2025. It is now read-only.

Commit 3675bf1

Browse files
imrim12imrim12
committed
build: setup rollup and component build
1 parent 46b705a commit 3675bf1

38 files changed

+2250
-3683
lines changed

‎.browserslistrc

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
> 1%
2-
last 2 versions
3-
not dead
1+
current node
2+
last 2 versions and > 2%
3+
ie > 10

‎.gitignore

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
.DS_Store
2-
node_modules
3-
/dist
4-
5-
/tests/e2e/videos/
6-
/tests/e2e/screenshots/
7-
2+
node_modules/
3+
/dist/
84

95
# local env files
106
.env.local
@@ -14,7 +10,6 @@ node_modules
1410
npm-debug.log*
1511
yarn-debug.log*
1612
yarn-error.log*
17-
pnpm-debug.log*
1813

1914
# Editor directories and files
2015
.idea
@@ -23,4 +18,4 @@ pnpm-debug.log*
2318
*.ntvs*
2419
*.njsproj
2520
*.sln
26-
*.sw?
21+
*.sw*

‎README.md

-34
This file was deleted.

‎babel.config.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
const devPresets = ["@vue/babel-preset-app"];
2+
const buildPresets = [
3+
[
4+
"@babel/preset-env",
5+
// Config for @babel/preset-env
6+
{
7+
// Example: Always transpile optional chaining/nullish coalescing
8+
// include: [
9+
// /(optional-chaining|nullish-coalescing)/
10+
// ],
11+
},
12+
],
13+
"@babel/preset-typescript",
14+
];
115
module.exports = {
2-
presets: ["@vue/cli-plugin-babel/preset"],
16+
presets: process.env.NODE_ENV === "development" ? devPresets : buildPresets,
317
};

‎build/rollup.config.js

+185
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
// rollup.config.js
2+
import fs from "fs";
3+
import path from "path";
4+
import vue from "rollup-plugin-vue";
5+
import alias from "@rollup/plugin-alias";
6+
import commonjs from "@rollup/plugin-commonjs";
7+
import resolve from "@rollup/plugin-node-resolve";
8+
import replace from "@rollup/plugin-replace";
9+
import babel from "@rollup/plugin-babel";
10+
import PostCSS from "rollup-plugin-postcss";
11+
import scss from "rollup-plugin-scss";
12+
import { terser } from "rollup-plugin-terser";
13+
import ttypescript from "ttypescript";
14+
import typescript from "rollup-plugin-typescript2";
15+
import minimist from "minimist";
16+
17+
// Get browserslist config and remove ie from es build targets
18+
const esbrowserslist = fs
19+
.readFileSync("./.browserslistrc")
20+
.toString()
21+
.split("\n")
22+
.filter((entry) => entry && entry.substring(0, 2) !== "ie");
23+
24+
// Extract babel preset-env config, to combine with esbrowserslist
25+
const babelPresetEnvConfig = require("../babel.config").presets.filter(
26+
(entry) => entry[0] === "@babel/preset-env",
27+
)[0][1];
28+
29+
const argv = minimist(process.argv.slice(2));
30+
31+
const projectRoot = path.resolve(__dirname, "..");
32+
33+
const baseConfig = {
34+
input: "src/entry.ts",
35+
plugins: {
36+
preVue: [
37+
alias({
38+
entries: [
39+
{
40+
find: "@",
41+
replacement: `${path.resolve(projectRoot, "src")}`,
42+
},
43+
],
44+
}),
45+
],
46+
replace: {
47+
"process.env.NODE_ENV": JSON.stringify("production"),
48+
},
49+
vue: {},
50+
postVue: [
51+
resolve({
52+
extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
53+
}),
54+
// Process only `<style module>` blocks.
55+
PostCSS({
56+
modules: {
57+
generateScopedName: "[local]___[hash:base64:5]",
58+
},
59+
include: /&module=.*\.css$/,
60+
}),
61+
// Process all `<style>` blocks except `<style module>`.
62+
PostCSS({ include: /(?<!&module=.*)\.css$/ }),
63+
commonjs(),
64+
],
65+
babel: {
66+
exclude: "node_modules/**",
67+
extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
68+
babelHelpers: "bundled",
69+
},
70+
},
71+
};
72+
73+
// ESM/UMD/IIFE shared settings: externals
74+
// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
75+
const external = [
76+
// list external dependencies, exactly the way it is written in the import statement.
77+
// eg. 'jquery'
78+
"vue",
79+
];
80+
81+
// UMD/IIFE shared settings: output.globals
82+
// Refer to https://rollupjs.org/guide/en#output-globals for details
83+
const globals = {
84+
// Provide global variable names to replace your external imports
85+
// eg. jquery: '$'
86+
vue: "Vue",
87+
};
88+
89+
// Customize configs for individual targets
90+
const buildFormats = [];
91+
if (!argv.format || argv.format === "es") {
92+
const esConfig = {
93+
...baseConfig,
94+
input: "src/entry.esm.ts",
95+
external,
96+
output: {
97+
file: "dist/vue-timeline-animation.esm.js",
98+
format: "esm",
99+
exports: "named",
100+
},
101+
plugins: [
102+
scss(),
103+
replace(baseConfig.plugins.replace),
104+
...baseConfig.plugins.preVue,
105+
vue(baseConfig.plugins.vue),
106+
...baseConfig.plugins.postVue,
107+
// Only use typescript for declarations - babel will
108+
// do actual js transformations
109+
typescript({
110+
typescript: ttypescript,
111+
useTsconfigDeclarationDir: true,
112+
emitDeclarationOnly: true,
113+
}),
114+
babel({
115+
...baseConfig.plugins.babel,
116+
presets: [
117+
[
118+
"@babel/preset-env",
119+
{
120+
...babelPresetEnvConfig,
121+
targets: esbrowserslist,
122+
},
123+
],
124+
],
125+
}),
126+
],
127+
};
128+
buildFormats.push(esConfig);
129+
}
130+
131+
if (!argv.format || argv.format === "cjs") {
132+
const umdConfig = {
133+
...baseConfig,
134+
external,
135+
output: {
136+
compact: true,
137+
file: "dist/vue-timeline-animation.ssr.js",
138+
format: "cjs",
139+
name: "VueAnimationTimeline",
140+
exports: "auto",
141+
globals,
142+
},
143+
plugins: [
144+
scss(),
145+
replace(baseConfig.plugins.replace),
146+
...baseConfig.plugins.preVue,
147+
vue(baseConfig.plugins.vue),
148+
...baseConfig.plugins.postVue,
149+
babel(baseConfig.plugins.babel),
150+
],
151+
};
152+
buildFormats.push(umdConfig);
153+
}
154+
155+
if (!argv.format || argv.format === "iife") {
156+
const unpkgConfig = {
157+
...baseConfig,
158+
external,
159+
output: {
160+
compact: true,
161+
file: "dist/vue-timeline-animation.min.js",
162+
format: "iife",
163+
name: "VueAnimationTimeline",
164+
exports: "auto",
165+
globals,
166+
},
167+
plugins: [
168+
scss(),
169+
replace(baseConfig.plugins.replace),
170+
...baseConfig.plugins.preVue,
171+
vue(baseConfig.plugins.vue),
172+
...baseConfig.plugins.postVue,
173+
babel(baseConfig.plugins.babel),
174+
terser({
175+
output: {
176+
ecma: 5,
177+
},
178+
}),
179+
],
180+
};
181+
buildFormats.push(unpkgConfig);
182+
}
183+
184+
// Export config
185+
export default buildFormats;

‎cypress.json

-3
This file was deleted.

‎dev/serve.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from "vue";
2+
import Dev from "./serve.vue";
3+
4+
const app = createApp(Dev);
5+
app.mount("#app");

‎dev/serve.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
import { defineComponent } from "vue";
3+
import VueAnimationTimeline from "@/package/vue-timeline-animation.vue";
4+
5+
export default defineComponent({
6+
name: "ServeDev",
7+
components: {
8+
VueAnimationTimeline,
9+
},
10+
});
11+
</script>
12+
13+
<template>
14+
<div id="app">
15+
<VueAnimationTimeline />
16+
</div>
17+
</template>

‎jest.config.js

-6
This file was deleted.

0 commit comments

Comments
 (0)