feat: 打印 dev server 可访问 url (#178)

Author: liaoyu

npm-shrinkwrap.json

@@ -1,14 +1,15 @@
 {
   "name": "fec-builder",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "bin": {
     "fec-builder": "./lib/bin.js"
   },
   "scripts": {
     "dev": "ts-node ./src/bin.ts -r ./samples/typescript-react",
     "build": "rm -rf lib && tsc && chmod +x lib/bin.js",
     "build-config-doc": "ts-node src/schema2md.ts",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "lint": "tsc --noEmit"
   },
   "engines": {
     "node": ">=12"
@@ -44,6 +45,7 @@
     "log4js": "^6.3.0",
     "mini-css-extract-plugin": "^1.3.9",
     "mustache": "^4.2.0",
+    "picocolors": "^1.1.1",
     "postcss-loader": "^4.3.0",
     "postcss-preset-env": "~7.2.3",
     "qiniu": "^7.3.2",
@@ -78,6 +80,6 @@
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Front-End-Engineering-Cloud/builder.git"
+    "url": "https://github.com/qiniu/builder.git"
   }
 }

package.json

@@ -8,6 +8,8 @@ import { Env, setEnv } from './utils/build-env'
 import logger from './utils/logger'
 import { setNeedAnalyze } from './utils/build-conf'
 
+const packageInfo = require('../package.json')
+
 // 禁掉 auto freeze，否则有的插件改数据时会异常，
 // 比如 postcss-loader 会去 delete options 上的 plugins 字段；
 // 详情见 https://immerjs.github.io/immer/docs/freezing
@@ -155,8 +157,8 @@ Object.entries(commands).forEach(([name, { desc, handler, isDefault }]) => {
   })
 })
 
-// enable --version
-parser.version()
+parser
+  .version(packageInfo.version).alias('v', 'version') // enable --version
   .help('h').alias('h', 'help')
   .locale('en')
   .argv

src/bin.ts

@@ -13,6 +13,7 @@ import { getPageFilename, getPathFromUrl, logLifecycle, watchFile } from './util
 import { getConfigForDevServer } from './webpack'
 import { BuildConfig, DevProxy, findBuildConfig, watchBuildConfig } from './utils/build-conf'
 import { entries, mapValues } from 'lodash'
+import colors from 'picocolors'
 import { abs } from './utils/paths'
 
 // 业务项目的配置文件，变更时需要重启 server
@@ -55,6 +56,7 @@ async function runDevServer(port: number) {
   const webpackConfig = await getConfigForDevServer()
   logger.debug('webpack config:', webpackConfig)
 
+  const host = '0.0.0.0'
   const devServerConfig: WebpackDevServer.Configuration = {
     hotOnly: true,
     // 方便开发调试
@@ -64,7 +66,7 @@ async function runDevServer(port: number) {
     // 从而正确地建立 hot module replace 依赖的 ws 链接及其它请求，逻辑见：
     // 这里之所以要求使用页面的 window.location 信息，是因为 builder 在容器中 serve 时端口会被转发，
     // 即可能配置 port 为 80，在（宿主机）浏览器中通过 8080 端口访问
-    public: '0.0.0.0:0',
+    public: `${host}:0`,
     publicPath: getPathFromUrl(buildConfig.publicUrl),
     stats: 'errors-only',
     proxy: getProxyConfig(buildConfig.devProxy),
@@ -81,9 +83,8 @@ async function runDevServer(port: number) {
     })
   })
 
-  const host = '0.0.0.0'
   server.listen(port, host, () => {
-    logger.info(`Server started on ${host}:${port}`)
+    logger.info(`Server started on ${colors.cyan(`http://localhost:${port}`)}`)
   })
 
   return () => new Promise<void>(resolve => {

src/serve.ts

@@ -7,7 +7,7 @@ import { mergeWith } from 'lodash'
 import { parse } from 'jsonc-parser'
 
 import { shouldAddGlobalPolyfill, AddPolyfill } from '../utils/build-conf'
-import { getBuildRoot } from '../utils/paths'
+import { abs, getBuildRoot } from '../utils/paths'
 
 /** 读取 tsconfig.json 文件获取 compilerOptions 配置 */
 function getTsCompilerOptions(): CompilerOptions | null {
@@ -78,7 +78,7 @@ function transformTsCompilerOptions(options: CompilerOptions | null): SwcOptions
         },
       },
       paths,
-      baseUrl
+      ...(baseUrl && { baseUrl: abs(baseUrl) })
     }
   }
 }