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 = [ const buildPresets = [
[ [
'@babel/preset-env', '@babel/preset-env',
...@@ -11,7 +11,7 @@ const buildPresets = [ ...@@ -11,7 +11,7 @@ const buildPresets = [
}, },
], ],
'@babel/preset-typescript', '@babel/preset-typescript',
]; ]
module.exports = { 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 = { ...@@ -107,9 +107,38 @@ const globals = {
// eg. jquery: '$' // eg. jquery: '$'
vue: 'Vue', vue: 'Vue',
} }
// Customize configs for individual targets // Customize configs for individual targets
const buildFormats = [] 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') { if (!argv.format || argv.format === 'es') {
const esConfig = { const esConfig = {
...baseConfig, ...baseConfig,
......
dev/serve.vue
View file @ eb4e0d06
<template> <template>
<div id="main"> <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" /> <component :is="component" />
<!-- <p class="name" title="点击复制" @click="copyName(component.name)"> <p v-if="isPro" class="name" title="点击复制" @click="copyName(component.name)">
{{ component.name }} {{ component.name }}
</p> --> </p>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { computed, defineComponent } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'ServeDev', name: 'ServeDev',
}) })
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import * as components from '@/lib/index' import * as components from '@/lib/index'
const isPro = computed(() => process.env.NODE_ENV === 'production')
function copyName(name) { function copyName(name) {
const input = document.createElement('input') const input = document.createElement('input')
input.value = name input.value = name
...@@ -43,32 +45,33 @@ function copyName(name) { ...@@ -43,32 +45,33 @@ function copyName(name) {
break-inside avoid break-inside avoid
margin-bottom .05rem margin-bottom .05rem
position relative position relative
// .name &.pro
// display none .name
// position absolute display none
// top 50% position absolute
// left 50% top 50%
// transform translate(-50%, -50%) left 50%
// font-size .2rem transform translate(-50%, -50%)
// font-weight bold font-size .2rem
// color #fff font-weight bold
// z-index 9 color #fff
// cursor pointer z-index 9
// &:hover cursor pointer
// &:after &:hover
// content '' &:after
// position absolute content ''
// top 0 position absolute
// left 0 top 0
// bottom 0 left 0
// right 0 bottom 0
// background rgba(0,0,0,.5) right 0
// z-index 8 background rgba(0,0,0,.5)
// .name z-index 8
// display block .name
// transition color .2s ease-in-out display block
// &:hover transition color .2s ease-in-out
// color #47B3FF &:hover
color #47B3FF
</style> </style>
<style lang="stylus"> <style lang="stylus">
@font-face @font-face
...@@ -94,7 +97,6 @@ html, body ...@@ -94,7 +97,6 @@ html, body
width 100% width 100%
height 100% height 100%
font-size .1rem font-size .1rem
background url('../src/assets/images/background.jpg') center/100% 100% no-repeat
color #fff color #fff
.orange-count .orange-count
font-size .14rem 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 @@ ...@@ -15,10 +15,10 @@
"scripts": { "scripts": {
"serve": "vue-cli-service serve dev/serve.ts", "serve": "vue-cli-service serve dev/serve.ts",
"prebuild": "rimraf ./dist", "prebuild": "rimraf ./dist",
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js && 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", "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", "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 ./repair.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" "postbuild": "rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"
}, },
"devDependencies": { "devDependencies": {
......
repair.js
View file @ eb4e0d06
...@@ -6,11 +6,13 @@ const file = './dist/component-lib.min.js' ...@@ -6,11 +6,13 @@ const file = './dist/component-lib.min.js'
fs.readFile(file, 'utf-8', (err, data) => { fs.readFile(file, 'utf-8', (err, data) => {
if (err) return console.error(err) if (err) return console.error(err)
const newData = data.replace('var ComponentLib=', 'export default ').replace('(Vue);', '') const newData = data
rimraf(file, err => { .replace('var ComponentLib=', 'export default ')
.replace('(Vue);', '')
rimraf(file, (err) => {
if (err) return console.error(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) 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 = { ...@@ -35,6 +35,7 @@ const data = {
const option = { const option = {
color: [['#0078D0', '#61FAFA']], color: [['#0078D0', '#61FAFA']],
legend: { show: false }, legend: { show: false },
tooltip: null,
radar: { radar: {
radius: '60%', radius: '60%',
axisName: { axisName: {
......
src/lib/A009/index.vue
View file @ eb4e0d06
...@@ -37,6 +37,7 @@ const data = { ...@@ -37,6 +37,7 @@ const data = {
const option = { const option = {
color: [['#F76B1C', '#FAD961']], color: [['#F76B1C', '#FAD961']],
legend: { show: false }, legend: { show: false },
tooltip: null,
radar: { radar: {
center: ['50%', '50%'], center: ['50%', '50%'],
radius: '52%', 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