diff --git a/docs/zh/guide/getting-started.md b/docs/zh/guide/getting-started.md index 3234b428..75e18253 100644 --- a/docs/zh/guide/getting-started.md +++ b/docs/zh/guide/getting-started.md @@ -1,13 +1,17 @@ # 快速上手 ## 依赖环境 -首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 10.13 或以上。 + +首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 12.13 或以上。 + ```bash # 打印 node 版本 node -v -v10.13.0 +v12.13.0 ``` + 推荐使用 yarn 管理 npm 依赖 + ```bash # 全局安装 yarn npm i yarn -g @@ -17,21 +21,26 @@ npm i yarn -g 这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。 -##### 步骤1 创建工作空间 +##### 步骤 1 创建工作空间 + 如果工作空间不存在，则先创建： + ```bash # 创建目录 workspace mkdir workspace # 进入目录 workspace cd workspace ``` + 如果工作空间已存在，则直接进入 + ```bash # 进入目录 workspace cd workspace ``` -##### 步骤2 在工作空间创建项目 +##### 步骤 2 在工作空间创建项目 + @@ -52,22 +61,22 @@ npx @fesjs/create-fes-app myapp - 如果项目文件夹 `workspace/myapp` 已经存在，会提示目录已存在： 目录已存在提示 你可以选择： -- `Overwrite` 删除项目文件夹，重新创建项目。 -- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。 + +- `Overwrite` 删除项目文件夹，重新创建项目。 +- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。 当选择 `Overwrite` 或者 `Merge` 或者项目目录 `workspace/myapp` 不存在，会提示选取一个 `template`： 选择模板类型 -你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。 +你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。 +##### 步骤 3 安装依赖 -##### 步骤3 安装依赖 @@ -75,7 +84,7 @@ npx @fesjs/create-fes-app myapp # 进入项目目录 cd myapp # 安装依赖 -yarn +yarn ``` @@ -86,13 +95,14 @@ yarn # 进入项目目录 cd myapp # 安装依赖 -npm i +npm i ``` -## 启动项目 +## 启动项目 + @@ -130,15 +140,14 @@ Starting the development server http://localhost:8080 ... - Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。 - home ## 部署发布 ### 构建 + @@ -173,6 +182,7 @@ npm run build 构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。 + ```base tree ./dist @@ -188,8 +198,9 @@ dist ``` ### 本地验证 + 发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `fes dev` 的结果一样。 - ### 部署 -本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。 \ No newline at end of file + +本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。 diff --git a/docs/zh/guide/upgrade2.1.md b/docs/zh/guide/upgrade2.1.md index 2710fce2..dc660792 100644 --- a/docs/zh/guide/upgrade2.1.md +++ b/docs/zh/guide/upgrade2.1.md @@ -2,11 +2,8 @@ ## 版本 2.1.x 的 break -1. 编译时的 [base](../reference/config/#base) 配置，移到了 [router.base](../reference/config/#router) 下 - -## 相关插件 - -由于需要兼容 Vite 的写法，插件也做了相关代码调整， +1. 编译时的 [base](../reference/config/#base) 配置，移到了 [router.base](../reference/config/#router) 下。 +2. [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 从 `v3.x` 升级到了 `v4.x`，如果遇到配置不兼容，可以查看[webpack-dev-server 3.x 升级 4.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md)。 ## 不变更构建方式 diff --git a/packages/fes-build-webpack/package.json b/packages/fes-build-webpack/package.json index ce2ad17d..a87f2327 100644 --- a/packages/fes-build-webpack/package.json +++ b/packages/fes-build-webpack/package.json @@ -59,11 +59,10 @@ "style-loader": "^2.0.0", "url-loader": "^4.1.1", "vue-loader": "^16.1.2", - "webpack": "^5.24.2", + "webpack": "^5.69.0", "webpack-bundle-analyzer": "^4.4.0", "webpack-chain": "^6.5.1", - "webpack-dev-server": "^3.11.2", - "webpackbar": "^5.0.0-3" + "webpack-dev-server": "^4.8.1" }, "peerDependencies": { "@vue/compiler-sfc": "^3.0.5", diff --git a/packages/fes-build-webpack/src/plugins/commands/dev/cert/cert.pem b/packages/fes-build-webpack/src/plugins/commands/dev/cert/cert.pem deleted file mode 100644 index 7e4e292b..00000000 --- a/packages/fes-build-webpack/src/plugins/commands/dev/cert/cert.pem +++ /dev/null @@ -1,25 +0,0 @@ ------BEGIN CERTIFICATE----- -MIIETDCCArSgAwIBAgIQKxt9OXlPUkkQASISMtxezDANBgkqhkiG9w0BAQsFADBh -MR4wHAYDVQQKExVta2NlcnQgZGV2ZWxvcG1lbnQgQ0ExGzAZBgNVBAsMEmpjbEB5 -Y2pjbDg2OC5sb2NhbDEiMCAGA1UEAwwZbWtjZXJ0IGpjbEB5Y2pjbDg2OC5sb2Nh -bDAeFw0xOTA2MDEwMDAwMDBaFw0zMDA2MDEwOTMzNTdaMEkxJzAlBgNVBAoTHm1r -Y2VydCBkZXZlbG9wbWVudCBjZXJ0aWZpY2F0ZTEeMBwGA1UECwwVamNsQHVtaWpz -LmxvY2FsICh1bWkpMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvKA/ -Oz9az6kEZ5zSZyufpYXt5gOAnE/f8VY2hP3g7JDRCMk6w0XgkmGDJ45nY9fVVhCy -oqg8bIkLcLbvp69/I5O8ae0TbyS95mgBflhgsqjSkydhn7bZmAe5OdZv+JtGBjd2 -2YDpzseK0z1VkXxgEAKYOsxszaCj6aktAhTQvER2DYGo0XaM62SOQNL4qLn97Zrg -+g8GSjS/Cg/vb+k42tCghOm0Ks26CDBl92Dwl5modEkfzewrjC2WNletiZupsX6p -rnRDBcGYHl+S/+D/iHCSu83IkxoorsIigGlSah/nVfetsKHBTXFXnSxL86T9MA1R -5ZcXoVv1cWZNiiMMawIDAQABo4GXMIGUMA4GA1UdDwEB/wQEAwIFoDATBgNVHSUE -DDAKBggrBgEFBQcDATAMBgNVHRMBAf8EAjAAMB8GA1UdIwQYMBaAFFRTg3QdwqVq -CLRjdLfglrJZqTrzMD4GA1UdEQQ3MDWCCWxvY2FsaG9zdIIQbG9jYWwuYWxpcGF5 -Lm5ldIcEfwAAAYcQAAAAAAAAAAAAAAAAAAAAATANBgkqhkiG9w0BAQsFAAOCAYEA -lFgca57CNAoaq8MC6bTZo10FC/LDTnUh/p20w5uCp8iSKGtVM+HvulrWXwUGRkUl -jnukYeMwl4tONzwHeUV1oVT8DATFLAFIHE4ikGDM7V+Ximxv5yQQ9hD8fzeOWdYO -SKA5eDjd+ut+HiSfItqgM+8t1RxPxsYlGeOMp65cKt1NaIdRxQHwESGba6H0sez7 -p5Eu95pXp/BUy7lnvqudXgfTAUpSzxpSG+49hzMKuN/CAZyFNp52qDDHpRtuxHns -q0pjGHBOC2aYc1eXNgn2g0wMDp3+BYh9yjoWNkMKqY7hpcB9PY5zw0u8R0wG8z+n -d915bZT3FKjx5sxmDmVaDNdARwi9ExqFvIs+hje1IUrszR7pnT7EUcUOhWNbKKkf -jRH3sy+TyA+TsYm1AAcnnY/Ne/Ce4OcMGcYwjb1L/gu/PWoup4f/GIziEw8cbPti -1+Exm+AOSjcSspPPfQmpHqupNaDJSjo6xYX3wn3oIb34WvH8INL3liiVedn+LTy4 ------END CERTIFICATE----- \ No newline at end of file diff --git a/packages/fes-build-webpack/src/plugins/commands/dev/cert/key.pem b/packages/fes-build-webpack/src/plugins/commands/dev/cert/key.pem deleted file mode 100644 index 89dc20bd..00000000 --- a/packages/fes-build-webpack/src/plugins/commands/dev/cert/key.pem +++ /dev/null @@ -1,28 +0,0 @@ ------BEGIN PRIVATE KEY----- -MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC8oD87P1rPqQRn -nNJnK5+lhe3mA4CcT9/xVjaE/eDskNEIyTrDReCSYYMnjmdj19VWELKiqDxsiQtw -tu+nr38jk7xp7RNvJL3maAF+WGCyqNKTJ2GfttmYB7k51m/4m0YGN3bZgOnOx4rT -PVWRfGAQApg6zGzNoKPpqS0CFNC8RHYNgajRdozrZI5A0viouf3tmuD6DwZKNL8K -D+9v6Tja0KCE6bQqzboIMGX3YPCXmah0SR/N7CuMLZY2V62Jm6mxfqmudEMFwZge -X5L/4P+IcJK7zciTGiiuwiKAaVJqH+dV962wocFNcVedLEvzpP0wDVHllxehW/Vx -Zk2KIwxrAgMBAAECggEAUdiitz2dVN/85kyYy2WVZ0g+2wCIDMtn25tSGtDiiSOp -YEuYsOSgNkQTmdVjrWIY0rh6GrQvS9UHXsgyIyu2WiSfq8LQHPjvYYudokoM41j3 -zhxXcurvbdVkHOGcQl51uvrUGjqiuTPCXDiP6YnzUN8fWNwdFfhvR1M+EVog3J+F -RpSavm+SCOkyqCBWgQDb/p59kvlISJuDXKr3tV5HaKVKYfDBQLvuiZBweDwXjxop -z2Srs2GEmJPuKXU32deqNg7KgPvd6ADxb+GXhrGVBaj7dxi77E8nHL/aGutVE4ON -VqMwdWoRPkEPU33rF+CCxHqHJFcNS+62ozzeUYGlaQKBgQDR2mPnjthIgMkX+cw5 -ROSadd5gZtQFXAzjAv685k+Xqm2IGk2Z2d5VydHO7cKwVLTB6cEJ+CbLZ1kIS6yV -GxBHaZ+LQxGkt4QD9IBSnL9Cxe7uvo+bpvV3eXbANG0tNl482RctS/u+g+OGSu05 -6KIIlYag5hcMjr7ozuhv8LVytwKBgQDmGuIKFHXXqeRJNW+QvJfwQFKNQViqASlY -W4Y5guS6s85inJ3bRKwYtZsczne2uwYqQHlPw8X4TQMXApM+04mJtqwrYDpcX6Ad -VYPmo+J/k917QwlN8VP4AzlDdz8PU+zenmWgpKaG8GMtYia9qCIbWY/+hwwBk0sG -FNpguWnv7QKBgFSGT2ksSwdhAB5tGgoTKrTgNvLDWDDUc8hYI3y4k2R2W+nPFmSa -sYgCY0Si1aEqbSgR3BQE5LNW7DCAMoJYRUVOUNnJ6Ohclor1R15/DjZ5/RQioztB -k2tM/DzMoRDt7iU6F7DCAyMoglNMCKMjhWhJudFC/BOtx02EUXENFjifAoGAD966 -yEcw+XbWL9Zno2vebsuA5g0juFXsLBPj5gOJEvdjvJlgqcbKt8mOsSXsS8YKXs+j -jkTKWp21INkknqioS781kKhKXiSaPmuvdTDIZlQkamPtOFr0l55hTK3kw4HeTFxQ -VgwFEDl0HaUvVtVJxOkgbUWTJmiqO/kkNpeTHuECgYEAtD4dRK3w65d9BWHqgeOV -IVSDeYjA6gNuC3tuGzk9bA70U0X/T8+EQMuKNvRZC61/JzAlzEH1oGIw8md8Ki86 -aRT96Gce7Q0FA3SaQ+h+w+kgsJG/aly3IThaJh/mx6HN7Xry6BFO1vlYlgdlm/1G -iKX/ppCt7bJYqfrptWs42u4= ------END PRIVATE KEY----- \ No newline at end of file diff --git a/packages/fes-build-webpack/src/plugins/commands/dev/devServer.js b/packages/fes-build-webpack/src/plugins/commands/dev/devServer.js index 5fdba6c6..75af1c91 100644 --- a/packages/fes-build-webpack/src/plugins/commands/dev/devServer.js +++ b/packages/fes-build-webpack/src/plugins/commands/dev/devServer.js @@ -1,46 +1,42 @@ import WebpackDevServer from 'webpack-dev-server'; import webpack from 'webpack'; -import fs from 'fs'; -import path from 'path'; export function startDevServer({ webpackConfig, host, port, proxy, https, beforeMiddlewares, afterMiddlewares, customerDevServerConfig }) { const options = { - contentBase: webpackConfig.output.path, hot: true, + port, host, - sockHost: host, - sockPort: port, proxy, - compress: true, - noInfo: true, - disableHostCheck: true, - clientLogLevel: 'silent', - stats: 'errors-only', - before: (app) => { - beforeMiddlewares.forEach((middleware) => { - app.use(middleware); - }); + allowedHosts: 'all', + static: { + // contentBase: webpackConfig.output.path, }, - after: (app) => { - afterMiddlewares.forEach((middleware) => { - app.use(middleware); - }); + server: https ? 'https' : 'http', + client: { + logging: 'error', + webSocketURL: { + hostname: host, + port, + }, + }, + devMiddleware: { + stats: 'errors-only', + }, + setupMiddlewares(middlewares) { + middlewares.unshift(...beforeMiddlewares); + middlewares.push(...afterMiddlewares); + + return middlewares; }, headers: { 'access-control-allow-origin': '*', }, ...(customerDevServerConfig || {}), }; - if (https) { - options.https = true; - options.key = fs.readFileSync(path.resolve(__dirname, './cert/key.pem')); - options.cert = fs.readFileSync(path.resolve(__dirname, './cert/cert.pem')); - } - WebpackDevServer.addDevServerEntrypoints(webpackConfig, options); const compiler = webpack(webpackConfig); - const server = new WebpackDevServer(compiler, options); + const server = new WebpackDevServer(options, compiler); - server.listen(port, host, (err) => { + server.startCallback((err) => { if (err) { console.error(err); } diff --git a/packages/fes-build-webpack/src/plugins/commands/dev/index.js b/packages/fes-build-webpack/src/plugins/commands/dev/index.js index b1285999..52f1f8cd 100644 --- a/packages/fes-build-webpack/src/plugins/commands/dev/index.js +++ b/packages/fes-build-webpack/src/plugins/commands/dev/index.js @@ -9,11 +9,11 @@ export default (api) => { let hostname; let server; - function destroy() { + async function destroy() { for (const unwatch of unwatchs) { unwatch(); } - server?.close(); + await server?.stop(); } api.registerCommand({ @@ -39,9 +39,7 @@ export default (api) => { hostname = getHostName(api.config.devServer?.host); // enable https - const isHTTPS = process.env.HTTPS || args.https; - - console.log(chalk.cyan(`Starting the development server ${isHTTPS ? 'https' : 'http'}://${hostname}:${port} ...`)); + const isHTTPS = process.env.HTTPS || args.https || api.config.devServer?.https; cleanTmpPathExceptCache({ absTmpPath: paths.absTmpPath, diff --git a/packages/fes-build-webpack/src/plugins/commands/webpackConfig/index.js b/packages/fes-build-webpack/src/plugins/commands/webpackConfig/index.js index 1b962e1a..58a1e4c4 100644 --- a/packages/fes-build-webpack/src/plugins/commands/webpackConfig/index.js +++ b/packages/fes-build-webpack/src/plugins/commands/webpackConfig/index.js @@ -278,9 +278,6 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod webpackConfig, }); - // --------------- 构建输出 ---------- - webpackConfig.plugin('progress').use(require.resolve('webpackbar')); - // --------------- chainwebpack ----------- if (chainWebpack) { await chainWebpack(webpackConfig, { diff --git a/packages/fes-template-h5/.fes.js b/packages/fes-template-h5/.fes.js index 3b1b1d41..cd83bfa4 100644 --- a/packages/fes-template-h5/.fes.js +++ b/packages/fes-template-h5/.fes.js @@ -35,17 +35,6 @@ export default defineBuildConfig({ ], devServer: { port: 8000 - }, - windicss: { - config: { - theme: { - extend: { - colors: { - green: '#7cb305' - } - } - } - } - }, + } }); diff --git a/packages/fes-template-h5/package.json b/packages/fes-template-h5/package.json index 75b2e444..582cbbdc 100644 --- a/packages/fes-template-h5/package.json +++ b/packages/fes-template-h5/package.json @@ -47,7 +47,6 @@ "@fesjs/fes": "^2.0.0", "@fesjs/plugin-icon": "^2.0.0", "@fesjs/plugin-request": "^2.0.0", - "@fesjs/plugin-windicss": "^2.0.8", "@fesjs/build-webpack": "^1.0.0", "vue": "^3.2.2" }, diff --git a/packages/fes-template-h5/src/pages/index.vue b/packages/fes-template-h5/src/pages/index.vue index fe303ce9..6a195529 100644 --- a/packages/fes-template-h5/src/pages/index.vue +++ b/packages/fes-template-h5/src/pages/index.vue @@ -1,5 +1,5 @@