Skip to content

C
component-lib
Commit eb4e0d06 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

添加组件展示页面打包

parent e6a0b2c3
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 44 deletions
babel.config.js
View file @ eb4e0d06
const devPresets = ['@vue/babel-preset-app'];
const devPresets = ['@vue/babel-preset-app']
const buildPresets = [
[
'@babel/preset-env',
......@@ -11,7 +11,7 @@ const buildPresets = [
},
],
'@babel/preset-typescript',
];
]
module.exports = {
presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
};
presets: process.env.NODE_ENV === 'development' ? devPresets : buildPresets,
}
build/rollup.config.js
View file @ eb4e0d06
......@@ -107,9 +107,38 @@ const globals = {
// eg. jquery: '$'
vue: 'Vue',
}
// Customize configs for individual targets
const buildFormats = []
const webConfig = {
...baseConfig,
input: 'dev/serve.ts',
output: {
file: 'dist/component-lib.web.js',
},
plugins: [
image(),
replace(baseConfig.plugins.replace),
...baseConfig.plugins.preVue,
vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
typescript(),
babel({
...baseConfig.plugins.babel,
presets: [
[
'@babel/preset-env',
{
...babelPresetEnvConfig,
targets: esbrowserslist,
},
],
],
}),
],
}
buildFormats.push(webConfig)
if (!argv.format || argv.format === 'es') {
const esConfig = {
...baseConfig,
......
dev/serve.vue
View file @ eb4e0d06
<template>
<div id="main">
<div v-for="(component, key) in components" :key="key" class="box">
<div v-for="(component, key) in components" :key="key" class="box" :class="{pro: isPro}">
<component :is="component" />
<!-- <p class="name" title="点击复制" @click="copyName(component.name)">
<p v-if="isPro" class="name" title="点击复制" @click="copyName(component.name)">
{{ component.name }}
</p> -->
</p>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { computed, defineComponent } from 'vue'
export default defineComponent({
name: 'ServeDev',
})
</script>
<script lang="ts" setup>
import * as components from '@/lib/index'
const isPro = computed(() => process.env.NODE_ENV === 'production')
function copyName(name) {
const input = document.createElement('input')
input.value = name
......@@ -43,32 +45,33 @@ function copyName(name) {
break-inside avoid
margin-bottom .05rem
position relative
// .name
// display none
// position absolute
// top 50%
// left 50%
// transform translate(-50%, -50%)
// font-size .2rem
// font-weight bold
// color #fff
// z-index 9
// cursor pointer
// &:hover
// &:after
// content ''
// position absolute
// top 0
// left 0
// bottom 0
// right 0
// background rgba(0,0,0,.5)
// z-index 8
// .name
// display block
// transition color .2s ease-in-out
// &:hover
// color #47B3FF
&.pro
.name
display none
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
font-size .2rem
font-weight bold
color #fff
z-index 9
cursor pointer
&:hover
&:after
content ''
position absolute
top 0
left 0
bottom 0
right 0
background rgba(0,0,0,.5)
z-index 8
.name
display block
transition color .2s ease-in-out
&:hover
color #47B3FF
</style>
<style lang="stylus">
@font-face
......@@ -94,7 +97,6 @@ html, body
width 100%
height 100%
font-size .1rem
background url('../src/assets/images/background.jpg') center/100% 100% no-repeat
color #fff
.orange-count
font-size .14rem
......
html.js 0 → 100644
View file @ eb4e0d06
/** 在dist中添加html */
const fs = require('fs')
const rimraf = require('rimraf')
const file = './dist/index.html'
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件列表</title>
<script type="module" crossorigin src="./component-lib.web.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
`
rimraf(file, (err) => {
if (err) return console.error(err)
fs.writeFile(file, html, 'utf-8', (err) => {
if (err) return console.error(err)
})
})
package.json
View file @ eb4e0d06
......@@ -15,10 +15,10 @@
"scripts": {
"serve": "vue-cli-service serve dev/serve.ts",
"prebuild": "rimraf ./dist",
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js && node ./repair.js",
"build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
"build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife && node ./repair.js",
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js && node ./html.js && node ./repair.js",
"build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs && node ./html.js ",
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es && node ./html.js ",
"build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife && node ./html.js && node ./repair.js",
"postbuild": "rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"
},
"devDependencies": {
......
repair.js
View file @ eb4e0d06
......@@ -6,11 +6,13 @@ const file = './dist/component-lib.min.js'
fs.readFile(file, 'utf-8', (err, data) => {
if (err) return console.error(err)
const newData = data.replace('var ComponentLib=', 'export default ').replace('(Vue);', '')
rimraf(file, err => {
const newData = data
.replace('var ComponentLib=', 'export default ')
.replace('(Vue);', '')
rimraf(file, (err) => {
if (err) return console.error(err)
fs.writeFile(file, newData, 'utf-8', err => {
fs.writeFile(file, newData, 'utf-8', (err) => {
if (err) return console.error(err)
})
})
})
\ No newline at end of file
})
src/lib/A008/index.vue
View file @ eb4e0d06
......@@ -35,6 +35,7 @@ const data = {
const option = {
color: [['#0078D0', '#61FAFA']],
legend: { show: false },
tooltip: null,
radar: {
radius: '60%',
axisName: {
......
src/lib/A009/index.vue
View file @ eb4e0d06
......@@ -37,6 +37,7 @@ const data = {
const option = {
color: [['#F76B1C', '#FAD961']],
legend: { show: false },
tooltip: null,
radar: {
center: ['50%', '50%'],
radius: '52%',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment