|
| 1 | +process.env.ENTRY_INDEX = 'dev'; |
| 2 | + |
| 3 | +const fs = require('fs'); |
| 4 | +const path = require('path'); |
| 5 | +const chokidar = require('chokidar'); |
| 6 | +const importFresh = require('import-fresh'); |
| 7 | +const replace = require('json-templater/string'); |
| 8 | +const webpack = require('webpack'); |
| 9 | +const WebpackDevServer = require('webpack-dev-server'); |
| 10 | +const devWebpack = require('./webpack.dev.conf'); |
| 11 | + |
| 12 | +const configPath = path.join(__dirname, './config.js'); |
| 13 | + |
| 14 | +let { devComponent } = require('./config'); |
| 15 | + |
| 16 | +const componentsInPrototype = ['Modal', 'message', 'notification']; |
| 17 | + |
| 18 | +const MAIN_TEMPLATE = `import 'babel-polyfill'; |
| 19 | +import './index.less'; |
| 20 | +import 'highlight.js/styles/solarized-light.css'; |
| 21 | +import Vue from 'vue'; |
| 22 | +import Vuex from 'vuex'; |
| 23 | +import VueI18n from 'vue-i18n'; |
| 24 | +import VueRouter from 'vue-router'; |
| 25 | +import VueClipboard from 'vue-clipboard2'; |
| 26 | +import Md from './components/md'; |
| 27 | +import Api from './components/api'; |
| 28 | +import demoBox from './components/demoBox'; |
| 29 | +import demoContainer from './components/demoContainer'; |
| 30 | +import Modal from '../components/modal'; |
| 31 | +import message from '../components/message'; |
| 32 | +import notification from '../components/notification'; |
| 33 | +{{importComponents}} |
| 34 | +{{importStyles}} |
| 35 | +import '../components/modal/style'; |
| 36 | +import '../components/message/style'; |
| 37 | +import '../components/notification/style'; |
| 38 | +import Test from '../components/{{name}}/demo/index.vue'; |
| 39 | +import zhCN from './theme/zh-CN'; |
| 40 | +import enUS from './theme/en-US'; |
| 41 | +
|
| 42 | +Vue.use(Vuex); |
| 43 | +Vue.use(VueClipboard); |
| 44 | +Vue.use(VueRouter); |
| 45 | +Vue.use(VueI18n); |
| 46 | +Vue.component(Md.name, Md); |
| 47 | +Vue.component(Api.name, Api); |
| 48 | +Vue.component('demo-box', demoBox); |
| 49 | +Vue.component('demo-container', demoContainer); |
| 50 | +
|
| 51 | +Vue.prototype.$message = message; |
| 52 | +Vue.prototype.$notification = notification; |
| 53 | +Vue.prototype.$info = Modal.info; |
| 54 | +Vue.prototype.$success = Modal.success; |
| 55 | +Vue.prototype.$error = Modal.error; |
| 56 | +Vue.prototype.$warning = Modal.warning; |
| 57 | +Vue.prototype.$confirm = Modal.confirm; |
| 58 | +Vue.prototype.$destroyAll = Modal.destroyAll; |
| 59 | +
|
| 60 | +Vue.use(Modal); |
| 61 | +{{install}} |
| 62 | +
|
| 63 | +const i18n = new VueI18n({ |
| 64 | + locale: enUS.locale, |
| 65 | + messages: { |
| 66 | + [enUS.locale]: { message: enUS.messages }, |
| 67 | + [zhCN.locale]: { message: zhCN.messages }, |
| 68 | + }, |
| 69 | +}); |
| 70 | +
|
| 71 | +const router = new VueRouter({ |
| 72 | + mode: 'history', |
| 73 | + routes: [{ path: '/*', component: Test }], |
| 74 | +}); |
| 75 | +
|
| 76 | +const store = new Vuex.Store({ |
| 77 | + state: { |
| 78 | + username: 'zeka', |
| 79 | + }, |
| 80 | + mutations: { |
| 81 | + update(state, payload) { |
| 82 | + state.username = payload.username; |
| 83 | + }, |
| 84 | + }, |
| 85 | +}); |
| 86 | +new Vue({ |
| 87 | + el: '#app', |
| 88 | + i18n, |
| 89 | + router, |
| 90 | + store, |
| 91 | +}); |
| 92 | +`; |
| 93 | + |
| 94 | +const OUTPUT_PATH = path.join(__dirname, '../site/dev.js'); |
| 95 | + |
| 96 | +const generateEntry = components => |
| 97 | + Object.keys(components) |
| 98 | + .map(component => `import ${component} from '../components/${components[component]}';`) |
| 99 | + .join('\n'); |
| 100 | + |
| 101 | +const generateStyles = components => |
| 102 | + Object.keys(components) |
| 103 | + .map(component => `import '../components/${components[component]}/style';`) |
| 104 | + .join('\n'); |
| 105 | + |
| 106 | +const generateInstall = components => |
| 107 | + Object.keys(components) |
| 108 | + .map(component => `Vue.use(${component});`) |
| 109 | + .join('\n'); |
| 110 | + |
| 111 | +const renderTemplate = name => { |
| 112 | + const components = { |
| 113 | + Tooltip: 'tooltip', // for DemoBox |
| 114 | + }; |
| 115 | + |
| 116 | + const demoPaths = fs.readdirSync(path.join(__dirname, `../components/${name}/demo`)); |
| 117 | + |
| 118 | + demoPaths.forEach(demoPath => { |
| 119 | + const demo = fs |
| 120 | + .readFileSync(path.join(__dirname, `../components/${name}/demo/${demoPath}`)) |
| 121 | + .toString(); |
| 122 | + |
| 123 | + const componentsInDemo = demo.match(/a-(\w+(-\w+)*)/g) || []; |
| 124 | + componentsInDemo.forEach(name => { |
| 125 | + const componentName = name.replace(/-(\w)/g, ($, $1) => $1.toUpperCase()).replace(/^a/, ''); |
| 126 | + |
| 127 | + if (componentsInPrototype.includes(componentName)) { |
| 128 | + return; |
| 129 | + } |
| 130 | + |
| 131 | + const componentPath = path.join(__dirname, `../components/${name.replace(/^a-/, '')}`); |
| 132 | + if (fs.existsSync(componentPath)) { |
| 133 | + components[componentName] = name.replace(/^a-/, ''); |
| 134 | + } |
| 135 | + }); |
| 136 | + }); |
| 137 | + |
| 138 | + const importComponents = generateEntry(components); |
| 139 | + const importStyles = generateStyles(components); |
| 140 | + const install = generateInstall(components); |
| 141 | + const template = replace(MAIN_TEMPLATE, { |
| 142 | + importComponents, |
| 143 | + importStyles, |
| 144 | + install, |
| 145 | + name, |
| 146 | + }); |
| 147 | + fs.writeFileSync(OUTPUT_PATH, template); |
| 148 | +}; |
| 149 | + |
| 150 | +let demoWatcher; |
| 151 | + |
| 152 | +chokidar.watch(configPath, { ignoreInitial: true }).on('change', async () => { |
| 153 | + devComponent = importFresh(configPath).devComponent; |
| 154 | + |
| 155 | + demoWatcher && (await demoWatcher.close()); |
| 156 | + |
| 157 | + demoWatcher = chokidar.watch(path.join(__dirname, `../components/${devComponent}/demo`)); |
| 158 | + demoWatcher.on('change', () => { |
| 159 | + renderTemplate(devComponent); |
| 160 | + }); |
| 161 | + |
| 162 | + renderTemplate(devComponent); |
| 163 | +}); |
| 164 | + |
| 165 | +renderTemplate(devComponent); |
| 166 | + |
| 167 | +const compiler = webpack(devWebpack); |
| 168 | + |
| 169 | +const configuration = devWebpack.devServer; |
| 170 | + |
| 171 | +const server = new WebpackDevServer(compiler, configuration); |
| 172 | +server.listen(configuration.port); |
0 commit comments