diff --git a/packages/vant-cli/site/desktop/App.vue b/packages/vant-cli/site/desktop/App.vue index d24ef8556..8a74c720a 100644 --- a/packages/vant-cli/site/desktop/App.vue +++ b/packages/vant-cli/site/desktop/App.vue @@ -16,9 +16,10 @@ export default { }, data() { + const publicPath = (config.site && config.site.publicPath) || '/'; return { config: config.site, - simulator: `mobile.html${location.hash}` + simulator: `${publicPath}mobile.html${location.hash}` }; } }; diff --git a/packages/vant-cli/src/commands/build-site.ts b/packages/vant-cli/src/commands/build-site.ts new file mode 100644 index 000000000..a1dc1e1c9 --- /dev/null +++ b/packages/vant-cli/src/commands/build-site.ts @@ -0,0 +1,7 @@ +import { setNodeEnv } from '../common'; +import { compileSite } from '../compiler/compile-site'; + +export async function buildSite() { + setNodeEnv('production'); + await compileSite(true); +} diff --git a/packages/vant-cli/src/commands/build.ts b/packages/vant-cli/src/commands/build.ts index 75e1269b8..c3d15879c 100644 --- a/packages/vant-cli/src/commands/build.ts +++ b/packages/vant-cli/src/commands/build.ts @@ -1,12 +1,11 @@ -import webpack from 'webpack'; import { start, error, success } from 'signale'; -import { packageConfig } from '../config/webpack.package'; import { join } from 'path'; import { clean } from './clean'; import { remove, copy, readdirSync } from 'fs-extra'; import { compileJs } from '../compiler/compile-js'; import { compileSfc } from '../compiler/compile-sfc'; import { compileStyle } from '../compiler/compile-style'; +import { compilePackage } from '../compiler/compile-package'; import { genPackageEntry } from '../compiler/gen-package-entry'; import { genStyleDepsMap } from '../compiler/gen-style-deps-map'; import { genComponentStyle } from '../compiler/gen-component-style'; @@ -14,10 +13,12 @@ import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant'; import { isDir, isSfc, + isStyle, + isScript, isDemoDir, isTestDir, - isScript, - isStyle + setNodeEnv, + setModuleEnv } from '../common'; async function compileDir(dir: string) { @@ -52,22 +53,6 @@ async function compileDir(dir: string) { ); } -function setModuleEnv(value: string) { - process.env.BABEL_MODULE = value; -} - -function buildPackage(isMinify: boolean) { - return new Promise((resolve, reject) => { - webpack(packageConfig(isMinify), (err, stats) => { - if (err || stats.hasErrors()) { - reject(); - } else { - resolve(); - } - }); - }); -} - export async function buildESModuleOutputs() { await copy(SRC_DIR, ES_DIR); @@ -113,8 +98,8 @@ export async function buildPackedOutputs() { try { genPackageEntry(); - await buildPackage(false); - await buildPackage(true); + await compilePackage(false); + await compilePackage(true); success('Build packed outputs'); } catch (err) { error('Build packed outputs'); @@ -122,6 +107,7 @@ export async function buildPackedOutputs() { } export async function build() { + setNodeEnv('production'); await clean(); await buildESModuleOutputs(); await buildCommonjsOutputs(); diff --git a/packages/vant-cli/src/commands/dev.ts b/packages/vant-cli/src/commands/dev.ts index 578351fb1..780d87636 100644 --- a/packages/vant-cli/src/commands/dev.ts +++ b/packages/vant-cli/src/commands/dev.ts @@ -1,47 +1,10 @@ -import webpack from 'webpack'; -import WebpackDevServer from 'webpack-dev-server'; -import { getPort } from 'portfinder'; + import { clean } from '../commands/clean'; -import { buildESModuleOutputs } from './build'; -import { siteDevConfig } from '../config/webpack.site.dev'; -import { genPackageEntry } from '../compiler/gen-package-entry'; -import { genPacakgeStyle } from '../compiler/gen-package-style'; -import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared'; -import { genSiteDesktopShared } from '../compiler/gen-site-desktop-shared'; -import { genStyleDepsMap } from '../compiler/gen-style-deps-map'; - -function runWebpack() { - const server = new WebpackDevServer( - webpack(siteDevConfig), - (siteDevConfig as any).devServer - ); - - getPort( - { - port: 8080 - }, - (err, port) => { - if (err) { - console.log(err); - return; - } - - server.listen(port, 'localhost', (err?: Error) => { - if (err) { - console.log(err); - } - }); - } - ); -} +import { setNodeEnv } from '../common'; +import { compileSite } from '../compiler/compile-site'; export async function dev() { + setNodeEnv('development'); await clean(); - await buildESModuleOutputs(); - genStyleDepsMap(); - genPackageEntry(); - genPacakgeStyle(); - genSiteMobileShared(); - genSiteDesktopShared(); - runWebpack(); + await compileSite(); } diff --git a/packages/vant-cli/src/commands/release.ts b/packages/vant-cli/src/commands/release.ts index 998d2730a..0db6cf8cc 100644 --- a/packages/vant-cli/src/commands/release.ts +++ b/packages/vant-cli/src/commands/release.ts @@ -1,7 +1,7 @@ /* eslint-disable no-template-curly-in-string */ -import { build } from './build'; // @ts-ignore import releaseIt from 'release-it'; +import { build } from './build'; export async function release() { await build(); diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts index ad9e511d0..66ec9828c 100644 --- a/packages/vant-cli/src/common/index.ts +++ b/packages/vant-cli/src/common/index.ts @@ -88,4 +88,12 @@ export function getWebpackConfig(): object { return {}; } +export function setModuleEnv(value: 'esmodule' | 'commonjs') { + process.env.BABEL_MODULE = value; +} + +export function setNodeEnv(value: 'production' | 'development') { + process.env.NODE_ENV = value; +} + export { decamelize }; diff --git a/packages/vant-cli/src/compiler/compile-package.ts b/packages/vant-cli/src/compiler/compile-package.ts new file mode 100644 index 000000000..dbbd80ff8 --- /dev/null +++ b/packages/vant-cli/src/compiler/compile-package.ts @@ -0,0 +1,14 @@ +import webpack from 'webpack'; +import { packageConfig } from '../config/webpack.package'; + +export async function compilePackage(isMinify: boolean) { + return new Promise((resolve, reject) => { + webpack(packageConfig(isMinify), (err, stats) => { + if (err || stats.hasErrors()) { + reject(); + } else { + resolve(); + } + }); + }); +} diff --git a/packages/vant-cli/src/compiler/compile-site.ts b/packages/vant-cli/src/compiler/compile-site.ts new file mode 100644 index 000000000..850e7cc28 --- /dev/null +++ b/packages/vant-cli/src/compiler/compile-site.ts @@ -0,0 +1,63 @@ +import webpack from 'webpack'; +import WebpackDevServer from 'webpack-dev-server'; +import { getPort } from 'portfinder'; +import { buildESModuleOutputs } from '../commands/build'; +import { genPackageEntry } from './gen-package-entry'; +import { genPacakgeStyle } from './gen-package-style'; +import { genSiteMobileShared } from './gen-site-mobile-shared'; +import { genSiteDesktopShared } from './gen-site-desktop-shared'; +import { genStyleDepsMap } from './gen-style-deps-map'; +import { siteDevConfig } from '../config/webpack.site.dev'; +import { sitePrdConfig } from '../config/webpack.site.prd'; + +function watch() { + const server = new WebpackDevServer( + webpack(siteDevConfig), + (siteDevConfig as any).devServer + ); + + getPort( + { + port: 8080 + }, + (err, port) => { + if (err) { + console.log(err); + return; + } + + server.listen(port, 'localhost', (err?: Error) => { + if (err) { + console.log(err); + } + }); + } + ); +} + +function build() { + return new Promise((resolve, reject) => { + webpack(sitePrdConfig, (err, stats) => { + if (err || stats.hasErrors()) { + reject(); + } else { + resolve(); + } + }); + }); +} + +export async function compileSite(production = false) { + await buildESModuleOutputs(); + genStyleDepsMap(); + genPackageEntry(); + genPacakgeStyle(); + genSiteMobileShared(); + genSiteDesktopShared(); + + if (production) { + await build(); + } else { + watch(); + } +} diff --git a/packages/vant-cli/src/config/webpack.site.dev.ts b/packages/vant-cli/src/config/webpack.site.dev.ts index 4df84d68c..d6f2d9d82 100644 --- a/packages/vant-cli/src/config/webpack.site.dev.ts +++ b/packages/vant-cli/src/config/webpack.site.dev.ts @@ -12,58 +12,56 @@ import { const siteConfig = CONFIG.site; const title = `${siteConfig.title} - ${siteConfig.description}`; -export const siteDevConfig = merge( - baseConfig as any, - { - entry: { - 'site-desktop': [join(__dirname, '../../site/desktop/main.js')], - 'site-mobile': [join(__dirname, '../../site/mobile/main.js')] - }, - devServer: { - open: true, - host: '0.0.0.0', - stats: 'errors-only', - disableHostCheck: true - }, - resolve: { - alias: { - 'site-mobile-shared': SITE_MODILE_SHARED_FILE, - 'site-desktop-shared': SITE_DESKTOP_SHARED_FILE - } - }, - output: { - path: join(__dirname, '../../site/dist'), - publicPath: '/', - chunkFilename: 'async_[name].js' - }, - optimization: { - splitChunks: { - cacheGroups: { - chunks: { - chunks: 'all', - minChunks: 2, - minSize: 0, - name: 'chunks' - } +export const siteDevBaseConfig = merge(baseConfig as any, { + entry: { + 'site-desktop': [join(__dirname, '../../site/desktop/main.js')], + 'site-mobile': [join(__dirname, '../../site/mobile/main.js')] + }, + devServer: { + open: true, + host: '0.0.0.0', + stats: 'errors-only', + disableHostCheck: true + }, + resolve: { + alias: { + 'site-mobile-shared': SITE_MODILE_SHARED_FILE, + 'site-desktop-shared': SITE_DESKTOP_SHARED_FILE + } + }, + output: { + path: join(__dirname, '../../site/dist'), + publicPath: '/', + chunkFilename: 'async_[name].js' + }, + optimization: { + splitChunks: { + cacheGroups: { + chunks: { + chunks: 'all', + minChunks: 2, + minSize: 0, + name: 'chunks' } } - }, - plugins: [ - new HtmlWebpackPlugin({ - title, - logo: siteConfig.logo, - chunks: ['chunks', 'site-desktop'], - template: join(__dirname, '../../site/desktop/index.html'), - filename: 'index.html' - }), - new HtmlWebpackPlugin({ - title, - logo: siteConfig.logo, - chunks: ['chunks', 'site-mobile'], - template: join(__dirname, '../../site/mobile/index.html'), - filename: 'mobile.html' - }) - ] + } }, - getWebpackConfig() -); + plugins: [ + new HtmlWebpackPlugin({ + title, + logo: siteConfig.logo, + chunks: ['chunks', 'site-desktop'], + template: join(__dirname, '../../site/desktop/index.html'), + filename: 'index.html' + }), + new HtmlWebpackPlugin({ + title, + logo: siteConfig.logo, + chunks: ['chunks', 'site-mobile'], + template: join(__dirname, '../../site/mobile/index.html'), + filename: 'mobile.html' + }) + ] +}); + +export const siteDevConfig = merge(siteDevBaseConfig, getWebpackConfig()); diff --git a/packages/vant-cli/src/config/webpack.site.prd.ts b/packages/vant-cli/src/config/webpack.site.prd.ts index 1f52deca5..7ee6a8e70 100644 --- a/packages/vant-cli/src/config/webpack.site.prd.ts +++ b/packages/vant-cli/src/config/webpack.site.prd.ts @@ -1,16 +1,17 @@ import merge from 'webpack-merge'; import { get } from 'lodash'; -import { siteDevConfig } from './webpack.site.dev'; import { getWebpackConfig } from '../common'; +import { siteDevBaseConfig } from './webpack.site.dev'; import { CONFIG, SITE_DIST_DIR } from '../common/constant'; const outputDir = get(CONFIG, 'build.site.outputDir', SITE_DIST_DIR); const publicPath = get(CONFIG, 'build.site.publicPath', '/'); export const sitePrdConfig = merge( - siteDevConfig, + siteDevBaseConfig, { mode: 'production', + stats: 'none', output: { publicPath, path: outputDir, diff --git a/packages/vant-cli/src/index.ts b/packages/vant-cli/src/index.ts index 7bff3b0b8..daf72660c 100755 --- a/packages/vant-cli/src/index.ts +++ b/packages/vant-cli/src/index.ts @@ -8,6 +8,7 @@ import { clean } from './commands/clean'; import { build } from './commands/build'; import { release } from './commands/release'; import { changelog } from './commands/changelog'; +import { buildSite } from './commands/build-site'; import { commitLint } from './commands/commit-lint'; command('dev').action(dev); @@ -24,6 +25,8 @@ command('changelog