diff --git a/README.en-US.md b/README.en-US.md index 360334793..f963c950e 100644 --- a/README.en-US.md +++ b/README.en-US.md @@ -66,6 +66,7 @@ It mainly has the following functions: | [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | Provide code editor capability, based on `monaco-editor` (code editor used by VS Code) | | [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | state manager | | [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | watermark | +| [@fesjs/plugin-swc](http://fesjs.mumblefe.cn/reference/plugin/plugins/swc.html) | use swc-loader | ## As easy as counting 1, 2, 3 use `yarn`： diff --git a/README.md b/README.md index dff37b693..b6b561740 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 | | [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 | | [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | - +| [@fesjs/plugin-swc](http://fesjs.mumblefe.cn/reference/plugin/plugins/swc.html) | 使用swc-loader构建 | ## 像数 1, 2, 3 一样容易 使用 `yarn`： diff --git a/build.config.js b/build.config.js index b90326b9d..2fc5ff965 100644 --- a/build.config.js +++ b/build.config.js @@ -24,6 +24,7 @@ module.exports = { 'fes-plugin-windicss', 'fes-plugin-watermark', 'fes-plugin-login', + 'fes-plugin-swc', ], copy: [], }; diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts index 2fbc1dc77..b9c6409fe 100644 --- a/docs/.vuepress/configs/sidebar/zh.ts +++ b/docs/.vuepress/configs/sidebar/zh.ts @@ -55,6 +55,7 @@ export const zh: SidebarConfig = { '/reference/plugin/plugins/pinia.md', '/reference/plugin/plugins/watermark.md', '/reference/plugin/plugins/login.md', + '/reference/plugin/plugins/swc.md', ], }, { diff --git a/docs/guide/builder.md b/docs/guide/builder.md index fbc17e49a..67d5fb862 100644 --- a/docs/guide/builder.md +++ b/docs/guide/builder.md @@ -5,7 +5,6 @@ - 选用 Vite 构建，安装 `npm i @fesjs/builder-vite` 依赖即可。 - 选用 Webpack 构建，安装 `npm i @fesjs/builder-webpack` 依赖即可。 - ## 使用差异 由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点： diff --git a/docs/reference/plugin/README.md b/docs/reference/plugin/README.md index a9cccbfb0..25be0d878 100644 --- a/docs/reference/plugin/README.md +++ b/docs/reference/plugin/README.md @@ -7,7 +7,7 @@ | [@fesjs/plugin-enums](./plugins/enums.md) | 提供统一的枚举存取及丰富的函数来处理枚举 | | [@fesjs/plugin-icon](./plugins/icon.md) | svg 文件自动注册为组件 | | [@fesjs/plugin-jest](./plugins/jest.md) | 基于 `Jest`，提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](./plugins/layout.md) | 简单的配置即可拥有布局，包括导航以及侧边栏 | +| [@fesjs/plugin-layout](./plugins/layout.md) | 简单的配置即可拥有布局，包括导航以及侧边栏 | | [@fesjs/plugin-locale](./plugins/locale.md) | 基于 `Vue I18n`，提供国际化能力 | | [@fesjs/plugin-model](./plugins/model.md) | 简易的数据管理方案 | | [@fesjs/plugin-request](./plugins/request.md) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 | @@ -18,6 +18,7 @@ | [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`，提供原子化 CSS 能力 | | [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`，提供状态管理 | | [@fesjs/plugin-watermark](./plugins/watermark.md) | 水印 | +| [@fesjs/plugin-swc](./plugins/swc.md) | swc | ## 架构 diff --git a/docs/reference/plugin/plugins/swc.md b/docs/reference/plugin/plugins/swc.md new file mode 100644 index 000000000..108191ec5 --- /dev/null +++ b/docs/reference/plugin/plugins/swc.md @@ -0,0 +1,30 @@ +# @fesjs/plugin-swc + +## 介绍 +webpack 启用 swc，构建速度更快！ + + +## 启用方式 +在 `package.json` 中引入依赖： +```json +{ + "dependencies": { + "@fesjs/fes": "^3.0.0", + "@fesjs/plugin-swc": "^3.0.0" + }, +} +``` + +## 编译时配置 +传对象时使用swc进行编译和压缩，[loader配置](https://swc.rs/docs/configuration/swcrc)，默认usage模式。 +```js +export default { + swc: { + loader: { + env: { + coreJs: '3.27', + }, + } + }, +} +``` diff --git a/packages/fes-builder-webpack/package.json b/packages/fes-builder-webpack/package.json index f391ccfba..0ba9dfa7e 100644 --- a/packages/fes-builder-webpack/package.json +++ b/packages/fes-builder-webpack/package.json @@ -44,8 +44,8 @@ "connect-history-api-fallback": "^1.6.0", "copy-webpack-plugin": "^7.0.0", "css-loader": "^5.0.1", - "css-minimizer-webpack-plugin": "^3.0.0", "fs-extra": "^10.0.0", + "css-minimizer-webpack-plugin": "^4.0.0", "html-webpack-plugin": "^5.0.0", "html-webpack-tags-plugin": "^3.0.0", "get-folder-size": "^2.0.1", @@ -57,6 +57,7 @@ "postcss-loader": "^4.2.0", "postcss-safe-parser": "^6.0.0", "style-loader": "^2.0.0", + "terser-webpack-plugin": "^5.3.6", "vue-loader": "^16.1.2", "webpack": "^5.69.0", "webpack-bundle-analyzer": "^4.4.0", diff --git a/packages/fes-builder-webpack/src/plugins/commands/build/build.js b/packages/fes-builder-webpack/src/plugins/commands/build/build.js index 2a2673db1..fa50b1c6b 100644 --- a/packages/fes-builder-webpack/src/plugins/commands/build/build.js +++ b/packages/fes-builder-webpack/src/plugins/commands/build/build.js @@ -4,10 +4,16 @@ export async function build({ bundleConfig }) { return new Promise((resolve, reject) => { const compiler = webpack(bundleConfig); compiler.run((err, stats) => { - if (err || stats.hasErrors()) { + if (err) { console.error(err); return reject(new Error('build failed')); } + if (stats?.hasErrors()) { + stats.compilation.errors.forEach((e) => { + console.error(e); + }); + return reject(new Error('build failed')); + } resolve({ stats }); }); }); diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/index.js b/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/index.js index 6f552241c..6aa22f4d1 100644 --- a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/index.js +++ b/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/index.js @@ -267,6 +267,9 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod if (chainWebpack) { await chainWebpack(webpackConfig, { createCSSRule, + env, + targets, + browserslist, webpack, }); } @@ -275,6 +278,8 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod await config.chainWebpack(webpackConfig, { createCSSRule, env, + targets, + browserslist, webpack, }); } diff --git a/packages/fes-plugin-swc/LICENSE b/packages/fes-plugin-swc/LICENSE new file mode 100644 index 000000000..0978fbf7e --- /dev/null +++ b/packages/fes-plugin-swc/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020-present webank + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/packages/fes-plugin-swc/README.md b/packages/fes-plugin-swc/README.md new file mode 100644 index 000000000..b6b561740 --- /dev/null +++ b/packages/fes-plugin-swc/README.md @@ -0,0 +1,126 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) +[![Page Views Count](https://badges.toozhao.com/badges/01G7TRNN1PH9PMSCYWDF3EK4QT/green.svg)](https://badges.toozhao.com/stats/01G7TRNN1PH9PMSCYWDF3EK4QT "Get your own page views count badge on badges.toozhao.com") + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前，我们可能需要做如下准备工作： +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。 + + +## Fes.js 是什么？ +Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。 + +它主要具备以下功能： +- 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。 + +- 🧨 __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。 + +- 💪 __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。 + +- 📦 __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。 + +- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5 和 vite提升构建性能和实现微服务。 + +## 插件 + +| 插件 | 介绍 | +| ---- | ---- | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`，提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局，包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`，提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`，提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | +| [@fesjs/plugin-swc](http://fesjs.mumblefe.cn/reference/plugin/plugins/swc.html) | 使用swc-loader构建 | + +## 像数 1, 2, 3 一样容易 +使用 `yarn`： +```bash +# 创建模板 +yarn create @fesjs/fes-app myapp + +# 安装依赖 +yarn + +# 运行 +yarn dev +``` + +使用 `npm`： +```bash +# 创建模板 +npx @fesjs/create-fes-app myapp + +# 安装依赖 +npm install + +# 运行 +npm run dev +``` + +## 反馈 + +| Github Issue | Fes.js开源运营小助手 | +| --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR： + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能，请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。 +请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + + diff --git a/packages/fes-plugin-swc/package.json b/packages/fes-plugin-swc/package.json new file mode 100644 index 000000000..416aa411d --- /dev/null +++ b/packages/fes-plugin-swc/package.json @@ -0,0 +1,41 @@ +{ + "name": "@fesjs/plugin-swc", + "version": "3.0.0-rc.0", + "description": "@fesjs/plugin-swc", + "main": "lib/index.js", + "types": "types.d.ts", + "files": [ + "lib", + "types.d.ts" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/WeBankFinTech/fes.js.git", + "directory": "packages/fes-plugin-swc" + }, + "keywords": [ + "fes" + ], + "author": "RiESAEX", + "license": "MIT", + "bugs": { + "url": "https://github.com/WeBankFinTech/fes.js/issues" + }, + "homepage": "https://github.com/WeBankFinTech/fes.js#readme", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@swc/core": "^1.3.37", + "@swc/css": "^0.0.20", + "swc-plugin-vue-jsx": "^0.2.0", + "swc-loader": "^0.2.3", + "@fesjs/utils": "^3.0.0-rc.2", + "terser-webpack-plugin": "^5.3.6", + "css-minimizer-webpack-plugin": "^4.0.0" + }, + "peerDependencies": { + "@fesjs/fes": "^3.0.0-rc.7", + "@fesjs/builder-webpack": "^3.0.0-rc.5" + } +} diff --git a/packages/fes-plugin-swc/src/index.js b/packages/fes-plugin-swc/src/index.js new file mode 100644 index 000000000..e6fb7a550 --- /dev/null +++ b/packages/fes-plugin-swc/src/index.js @@ -0,0 +1,126 @@ +import { join } from 'path'; +import TerserPlugin from 'terser-webpack-plugin'; +import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'; +import { buildSwcOptions } from './swcOptions'; + +const DEFAULT_EXCLUDE_NODE_MODULES = [ + 'vue', + 'vuex', + 'vue-router', + 'core-js', + 'echarts', + '@babel/runtime', + 'lodash-es', + 'webpack-dev-server', + 'ansi-html', + 'html-entities', +]; + +function genTranspileDepRegex(exclude) { + exclude = exclude.concat(DEFAULT_EXCLUDE_NODE_MODULES); + const deps = exclude.map((dep) => { + if (typeof dep === 'string') { + const depPath = join('node_modules', dep, '/'); + return /^win/.test(require('os').platform()) ? depPath.replace(/\\/g, '\\\\') : depPath; + } + if (dep instanceof RegExp) { + return dep.source; + } + + throw new Error('exclude only accepts an array of string or regular expressions'); + }); + return deps.length ? new RegExp(deps.join('|')) : null; +} + +export default (api) => { + api.describe({ + key: 'swc', + config: { + schema(joi) { + return joi.object({ + loader: joi.object().description('more swc options see https://github.com/swc-project/swc-loader'), + }); + }, + }, + }); + + if (api.builder.name === 'vite') { + // vite 不需要处理 + } else { + api.chainWebpack((webpackConfig, { targets, env }) => { + const isProd = env === 'production'; + const config = api.config; + + //清除babel配置 + webpackConfig.module.rules.delete('js'); + + webpackConfig.module + .rule('js') + .test(/\.(js|mjs)$/) + // Don't transpile node_modules + .exclude.add(/node_modules/) + .end() + .use('swc-loader') + .loader(require.resolve('swc-loader')) + .options(buildSwcOptions(targets, config, false, false)); + + webpackConfig.module + .rule('jsx') + .test(/\.jsx$/) + .exclude.add(/node_modules/) + .end() + .use('swc-loader') + .loader(require.resolve('swc-loader')) + .options(buildSwcOptions(targets, config, true, false)); + + webpackConfig.module + .rule('ts') + .test(/\.ts$/) + .exclude.add(/node_modules/) + .end() + .use('swc-loader') + .loader(require.resolve('swc-loader')) + .options(buildSwcOptions(targets, config, false, true)); + + webpackConfig.module + .rule('tsx') + .test(/\.tsx$/) + .exclude.add(/node_modules/) + .end() + .use('swc-loader') + .loader(require.resolve('swc-loader')) + .options(buildSwcOptions(targets, config, true, true)); + + // 为了避免第三方依赖包编译不充分导致线上问题，默认对 node_modules 也进行全编译，只在生产构建的时候进行 + if (isProd) { + webpackConfig.module.rules.delete('js-in-node_modules'); + + // const cjsReg = [/css-loader/, /vue-loader/].concat(config.swcLoader?.cjsPkg || []); + const transpileDepRegex = genTranspileDepRegex(config.nodeModulesTransform.exclude); + webpackConfig.module + .rule('js-in-node_modules') + .test(/\.(js|mjs)$/) + .include.add(/node_modules/) + .end() + .exclude.add((filepath) => { + if (transpileDepRegex && transpileDepRegex.test(filepath)) { + return true; + } + return false; + }) + .end() + .use('swc-loader') + .loader(require.resolve('swc-loader')) + .options(buildSwcOptions(targets, config, false, false)); + + const swcOptions = buildSwcOptions(targets, config, false, false, true); + webpackConfig.optimization.minimizer('css').tap((args) => [...args, { minify: CssMinimizerPlugin.swcMinify }]); + webpackConfig.optimization + .minimizer('terser') + .tap((args) => [...args, { terserOptions: swcOptions.jsc?.minify, minify: TerserPlugin.swcMinify }]); + } + + return webpackConfig; + }); + } +}; diff --git a/packages/fes-plugin-swc/src/swcOptions.js b/packages/fes-plugin-swc/src/swcOptions.js new file mode 100644 index 000000000..7fd4d533a --- /dev/null +++ b/packages/fes-plugin-swc/src/swcOptions.js @@ -0,0 +1,40 @@ +import { deepmerge } from '@fesjs/utils'; + +const Supported = ['chrome', 'opera', 'edge', 'firefox', 'safari', 'ie', 'ios', 'android', 'node', 'electron']; + +export function buildSwcOptions(targets, config, isJsx, isTs, minify = false) { + if (config.swc?.loader?.cjsPkg) { + delete config.swc.loader.cjsPkg; + } + return deepmerge( + { + // sync: true, + env: { + targets: Object.keys(targets) + .filter((key) => Supported.includes(key)) + .reduce((memo, key) => { + memo[key] = targets[key]; + return memo; + }, {}), + mode: 'usage', + coreJs: require('core-js/package.json').version, + }, + jsc: { + parser: { + syntax: isTs ? 'typescript' : 'ecmascript', + jsx: isTs ? undefined : isJsx, + tsx: isTs ? isJsx : undefined, + }, + experimental: isJsx + ? { + plugins: [['swc-plugin-vue-jsx', {}]], + } + : undefined, + // preserveAllComments: true, + }, + isModule: 'unknown', + minify: minify ? {} : false, + }, + config.swc?.loader || {}, + ); +} diff --git a/packages/fes-plugin-swc/types.d.ts b/packages/fes-plugin-swc/types.d.ts new file mode 100644 index 000000000..dcba1f520 --- /dev/null +++ b/packages/fes-plugin-swc/types.d.ts @@ -0,0 +1,7 @@ +declare module "@fesjs/fes" { + interface PluginBuildConfig { + swc?: { + loader?: object; + }; + } +} diff --git a/packages/fes-preset-built-in/src/plugins/features/targets.js b/packages/fes-preset-built-in/src/plugins/features/targets.js index 592d97eca..ef3fb03b6 100644 --- a/packages/fes-preset-built-in/src/plugins/features/targets.js +++ b/packages/fes-preset-built-in/src/plugins/features/targets.js @@ -5,7 +5,6 @@ export default (api) => { default: { chrome: '64', ios: '11', - browsers: ['defaults and not chrome < 61'], }, schema(joi) { return joi.object(); diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js index 045de219a..83373159e 100644 --- a/packages/fes-template/.fes.js +++ b/packages/fes-template/.fes.js @@ -1,6 +1,16 @@ import { defineBuildConfig } from '@fesjs/fes'; export default defineBuildConfig({ + swc: { + loader: { + env: { + coreJs: '3.27', + }, + }, + }, + targets: { + chrome: '78', + }, define: { __DEV__: false, }, diff --git a/packages/fes-template/.fes.prod.js b/packages/fes-template/.fes.prod.js index 153393d84..42d8a3c3a 100644 --- a/packages/fes-template/.fes.prod.js +++ b/packages/fes-template/.fes.prod.js @@ -1,6 +1,5 @@ // .fes.js 只负责管理编译时配置，只能使用plain Object - export default { - publicPath: 'https://gw.alipayobjects.com/' + // publicPath: 'https://gw.alipayobjects.com/' }; diff --git a/packages/fes-template/.gitignore b/packages/fes-template/.gitignore index df903b98d..59cb1b8e6 100644 --- a/packages/fes-template/.gitignore +++ b/packages/fes-template/.gitignore @@ -9,3 +9,6 @@ /src/.fes-production /src/.fes-test /.env.local + +# swc wasm cache +/.swc \ No newline at end of file diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json index 47de28093..b9281fae9 100644 --- a/packages/fes-template/package.json +++ b/packages/fes-template/package.json @@ -1,68 +1,71 @@ { - "name": "@fesjs/template", - "version": "2.0.0", - "description": "fes项目模版", - "scripts": { - "build": "fes build", - "prod": "FES_ENV=prod fes build", - "analyze": "ANALYZE=1 fes build", - "dev": "fes dev", - "test": "fes test" - }, - "keywords": [ - "管理端", - "fes", - "fast", - "easy", - "strong" - ], - "files": [ - ".eslintrc.js", - ".gitignore", - ".fes.js", - ".fes.prod.js", - "mock.js", - "package.json", - "README.md", - "tsconfig.json", - "/src", - "/config" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/WeBankFinTech/fes.js.git", - "directory": "packages/fes-template" - }, - "author": "harrywan", - "license": "MIT", - "bugs": { - "url": "https://github.com/WeBankFinTech/fes.js/issues" - }, - "homepage": "https://github.com/WeBankFinTech/fes.js#readme", - "publishConfig": { - "access": "public" - }, - "dependencies": { - "@fesjs/fes": "^3.0.0-rc.0", - "@fesjs/plugin-access": "^3.0.0-rc.0", - "@fesjs/plugin-layout": "^5.0.0-rc.0", - "@fesjs/plugin-locale": "^4.0.0-rc.0", - "@fesjs/plugin-login": "^3.0.0-rc.0", - "@fesjs/plugin-model": "^3.0.0-rc.0", - "@fesjs/plugin-enums": "^3.0.0-rc.0", - "@fesjs/plugin-jest": "^2.0.0", - "@fesjs/plugin-vuex": "^3.0.0-rc.0", - "@fesjs/plugin-request": "^3.0.0-rc.0", - "@fesjs/plugin-qiankun": "^3.0.0-rc.0", - "@fesjs/plugin-sass": "^3.0.0-rc.0", - "@fesjs/plugin-monaco-editor": "^3.0.0-rc.0", - "@fesjs/plugin-windicss": "^3.0.0-rc.0", - "@fesjs/plugin-watermark": "^3.0.0-rc.0", - "@fesjs/fes-design": "^0.7.0", - "core-js": "^3.27.0", - "vue": "^3.2.37", - "vuex": "^4.0.0", - "pinia": "^2.0.11" - }, - "private": true + "name": "@fesjs/template", + "version": "2.0.0", + "description": "fes项目模版", + "scripts": { + "build": "fes build", + "prod": "FES_ENV=prod fes build", + "analyze": "ANALYZE=1 fes build", + "dev": "fes dev", + "test": "fes test", + "prev": "fes preview" + }, + "keywords": [ + "管理端", + "fes", + "fast", + "easy", + "strong" + ], + "files": [ + ".eslintrc.js", + ".gitignore", + ".fes.js", + ".fes.prod.js", + "mock.js", + "package.json", + "README.md", + "tsconfig.json", + "/src", + "/config" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/WeBankFinTech/fes.js.git", + "directory": "packages/fes-template" + }, + "author": "harrywan", + "license": "MIT", + "bugs": { + "url": "https://github.com/WeBankFinTech/fes.js/issues" + }, + "homepage": "https://github.com/WeBankFinTech/fes.js#readme", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@fesjs/fes": "^3.0.0-rc.0", + "@fesjs/fes-design": "^0.7.0", + "@fesjs/plugin-login": "^3.0.0-rc.0", + "@fesjs/plugin-access": "^3.0.0-rc.0", + "@fesjs/plugin-enums": "^3.0.0-rc.0", + "@fesjs/plugin-jest": "^2.0.0", + "@fesjs/plugin-layout": "^5.0.0-rc.0", + "@fesjs/plugin-locale": "^4.0.0-rc.0", + "@fesjs/plugin-model": "^3.0.0-rc.0", + "@fesjs/plugin-monaco-editor": "^3.0.0-rc.0", + "@fesjs/plugin-pinia": "^3.0.0-rc.0", + "@fesjs/plugin-qiankun": "^3.0.0-rc.0", + "@fesjs/plugin-request": "^3.0.0-rc.0", + "@fesjs/plugin-sass": "^3.0.0-rc.0", + "@fesjs/plugin-vuex": "^3.0.0-rc.0", + "@fesjs/plugin-watermark": "^3.0.0-rc.0", + "@fesjs/plugin-windicss": "^3.0.0-rc.0", + "@fesjs/plugin-swc": "^3.0.0-rc.0", + "core-js": "3.27.0", + "pinia": "^2.0.11", + "vue": "^3.2.37", + "vuex": "^4.0.0" + }, + "private": true } diff --git a/packages/fes-template/src/app.js b/packages/fes-template/src/app.jsx similarity index 100% rename from packages/fes-template/src/app.js rename to packages/fes-template/src/app.jsx diff --git a/packages/fes-template/src/pages/@id/add.vue b/packages/fes-template/src/pages/@id/add.vue index 3725c137b..6b75609b5 100644 --- a/packages/fes-template/src/pages/@id/add.vue +++ b/packages/fes-template/src/pages/@id/add.vue @@ -1,3 +1,16 @@ + diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue index 41275d997..9abfa8b7b 100644 --- a/packages/fes-template/src/pages/index.vue +++ b/packages/fes-template/src/pages/index.vue @@ -1,5 +1,5 @@