feat: plugin-swc

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`：

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`：

build.config.js

@@ -23,6 +23,7 @@ module.exports = {
         'fes-plugin-pinia',
         'fes-plugin-windicss',
         'fes-plugin-watermark',
+        'fes-plugin-swc',
     ],
     copy: [],
 };

docs/.vuepress/configs/sidebar/zh.ts

@@ -65,6 +65,7 @@ export const zh: SidebarConfig = {
         '/reference/plugin/plugins/editor.md',
         '/reference/plugin/plugins/pinia.md',
         '/reference/plugin/plugins/watermark.md',
+        '/reference/plugin/plugins/swc.md',
       ],
     },
     {

docs/guide/builder.md

@@ -4,7 +4,6 @@
 
 -   选用 Vite 构建，安装 `npm i @fesjs/builder-vite` 依赖即可。
 -   选用 Webpack 构建，安装 `npm i @fesjs/builder-webpack` 依赖即可。
--   Webpack构建支持用babel+terser和swc两种编译方式，如选用swc，安装`npm i @swc/core` 同时配置额外传`swcLoader:{}`，具体可以查看[配置](../reference/config)。
 
 ## 使用差异
 

docs/reference/config/README.md

@@ -459,13 +459,6 @@ export default {
 
 配置额外的 `babel` 插件集。
 
-### swcLoader
--  类型： `object`
--  默认值： `undefined`
--  详情：
-
-传对象时使用swc进行编译和压缩，[swc配置](https://swc.rs/docs/configuration/swcrc)  
-默认usage模式
 ### extraPostCSSPlugins
 
 -   类型： `array`

docs/reference/plugin/README.md

@@ -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 |
 
 ## 架构
 

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',
+            },
+        }
+    },
+}
+```

packages/fes-builder-webpack/package.json

@@ -35,7 +35,6 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-typescript": "^7.15.0",
     "@fesjs/utils": "3.0.0-rc.2",
-    "@swc/css": "^0.0.18",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "autoprefixer": "^10.2.4",
     "babel-loader": "^8.2.2",
@@ -56,7 +55,6 @@
     "postcss-loader": "^4.2.0",
     "postcss-safe-parser": "^6.0.0",
     "style-loader": "^2.0.0",
-    "swc-loader": "^0.2.3",
     "terser-webpack-plugin": "^5.3.6",
     "vue-loader": "^16.1.2",
     "webpack": "^5.69.0",

packages/fes-builder-webpack/src/index.js

@@ -24,7 +24,6 @@ export default function () {
             require.resolve('./plugins/features/postcssLoader'),
             require.resolve('./plugins/features/nodeModulesTransform'),
             require.resolve('./plugins/features/vueLoader'),
-            require.resolve('./plugins/features/swcLoader'),
 
             // commands
             require.resolve('./plugins/commands/build'),

packages/fes-builder-webpack/src/plugins/commands/webpackConfig/css.js

@@ -10,7 +10,6 @@
 // 根据 entry 将文件输出到不同的文件夹
 
 import { deepmerge } from '@fesjs/utils';
-import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 
 function createRules({ isDev, webpackConfig, config, lang, test, loader, options, browserslist, styleLoaderOption }) {
     function applyLoaders(rule, cssLoaderOption = {}) {
@@ -98,7 +97,7 @@ export default function createCssWebpackConfig({ isDev, config, webpackConfig, b
                 chunkFilename: '[id].[contenthash:8].css',
             },
         ]);
-        webpackConfig.optimization.minimizer('css').use(require.resolve('css-minimizer-webpack-plugin'), [{ minify: CssMinimizerPlugin.swcMinify }]);
+        webpackConfig.optimization.minimizer('css').use(require.resolve('css-minimizer-webpack-plugin'), [{}]);
     }
 
     return (options) => {

packages/fes-builder-webpack/src/plugins/commands/webpackConfig/index.js

@@ -8,7 +8,6 @@ import createVueWebpackConfig from './vue';
 import createDefineWebpackConfig from './define';
 import createMinimizerWebpackConfig from './minimizer';
 import createHtmlWebpackConfig from './html';
-import { buildSwcOptions } from './swcOptions';
 
 const DEFAULT_EXCLUDE_NODE_MODULES = [
     'vue',
@@ -53,7 +52,6 @@ function handleAlias({ api, webpackConfig }) {
 export default async function getConfig({ api, cwd, config, env, entry = {}, modifyBabelOpts, modifyBabelPresetOpts, chainWebpack, headScripts, publicPath }) {
     const isDev = env === 'development';
     const isProd = env === 'production';
-    const useSwc = !!config.swcLoader;
     const webpackConfig = new Config();
     const absoluteOutput = join(cwd, config.outputPath || 'dist');
 
@@ -114,6 +112,13 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
         .type('asset/source');
 
     const { targets, browserslist } = api.utils.getTargetsAndBrowsersList({ config });
+    const babelOpts = await getBabelOpts({
+        cwd,
+        config,
+        modifyBabelOpts,
+        modifyBabelPresetOpts,
+        targets,
+    });
 
     // --------------- js -----------
     // https://webpack.docschina.org/configuration/module/#resolve-fully-specified
@@ -122,75 +127,12 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
         .test(/\.m?jsx?$/)
         .resolve.set('fullySpecified', false);
 
-    if (useSwc) {
-        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) {
-            // const cjsReg = [/css-loader/, /vue-loader/].concat(config.swcLoader?.cjsPkg || []);
-            const transpileDepRegex = genTranspileDepRegex(config.nodeModulesTransform.exclude);
-            webpackConfig.module
-                .rule('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));
-        }
-    } else {
-        const babelOpts = await getBabelOpts({
-            cwd,
-            config,
-            modifyBabelOpts,
-            modifyBabelPresetOpts,
-            targets,
-        });
     webpackConfig.module
         .rule('js')
         .test(/\.(js|mjs|jsx|ts|tsx)$/)
         .exclude.add((filepath) => {
             // always transpile js in vue files
-                if (/(\.tsx|\.ts|\.jsx)$/.test(filepath)) {
+            if (/(\.vue|\.jsx)$/.test(filepath)) {
                 return false;
             }
             // Don't transpile node_modules
@@ -221,7 +163,7 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
             .loader(require.resolve('babel-loader'))
             .options(babelOpts);
     }
-    }
+
     // --------------- css -----------
     const createCSSRule = createCssWebpackConfig({
         isDev,
@@ -319,13 +261,15 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
         isProd,
         config,
         webpackConfig,
-        swcOptions: useSwc ? buildSwcOptions(targets, config, false, false, true) : undefined,
     });
 
     // --------------- chainwebpack -----------
     if (chainWebpack) {
         await chainWebpack(webpackConfig, {
             createCSSRule,
+            env,
+            targets,
+            browserslist,
             webpack,
         });
     }
@@ -334,6 +278,8 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
         await config.chainWebpack(webpackConfig, {
             createCSSRule,
             env,
+            targets,
+            browserslist,
             webpack,
         });
     }

packages/fes-builder-webpack/src/plugins/commands/webpackConfig/minimizer.js

@@ -1,5 +1,4 @@
 import { deepmerge } from '@fesjs/utils';
-import TerserPlugin from 'terser-webpack-plugin';
 
 const defaultTerserOptions = {
     compress: {
@@ -38,22 +37,14 @@ const defaultTerserOptions = {
     },
 };
 
-const terserOptions = (config, swcOptions) => {
+const terserOptions = (config) => ({
-    if (swcOptions) {
-        return {
-            terserOptions: swcOptions.jsc?.minify,
-            minify: TerserPlugin.swcMinify,
-        };
-    }
-    return {
     terserOptions: deepmerge(defaultTerserOptions, config.terserOptions || {}),
     extractComments: false,
-    };
+});
-};
 
-export default function createMinimizerWebpackConfig({ isProd, config, webpackConfig, swcOptions }) {
+export default function createMinimizerWebpackConfig({ isProd, config, webpackConfig }) {
     if (isProd) {
-        webpackConfig.optimization.minimizer('terser').use(require.resolve('terser-webpack-plugin'), [terserOptions(config, swcOptions)]);
+        webpackConfig.optimization.minimizer('terser').use(require.resolve('terser-webpack-plugin'), [terserOptions(config)]);
     }
     if (process.env.FES_ENV === 'test') {
         webpackConfig.optimization.minimize(false);

packages/fes-builder-webpack/src/plugins/features/swcLoader.js

@@ -1,10 +0,0 @@
-export default (api) => {
-    api.describe({
-        key: 'swcLoader',
-        config: {
-            schema(joi) {
-                return joi.object().description('more swc options see https://github.com/swc-project/swc-loader');
-            },
-        },
-    });
-};

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.

packages/fes-plugin-swc/README.md

@@ -0,0 +1,126 @@
+简体中文 | [English](./README.en-US.md)
+
+<p align="center">
+  <a href="../../">
+    <img alt="fes.js" width="250" src="./images/fes-logo.png">
+  </a>
+</p>
+
+<div align="center">
+
+一个优秀的前端解决方案
+
+[![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")
+
+</div>
+
+- 使用文档 - [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) | <img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交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
+
+ 
+

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.32",
+    "@swc/css": "^0.0.18",
+    "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"
+  }
+}

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;
+        });
+    }
+};

packages/fes-plugin-swc/src/swcOptions.js

@@ -1,14 +1,21 @@
 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.swcLoader?.cjsPkg) {
+    if (config.swc?.loader?.cjsPkg) {
-        delete config.swcLoader.cjsPkg;
+        delete config.swc.loader.cjsPkg;
     }
     return deepmerge(
         {
             // sync: true,
             env: {
-                targets,
+                targets: Object.keys(targets)
+                    .filter((key) => Supported.includes(key))
+                    .reduce((memo, key) => {
+                        memo[key] = targets[key];
+                        return memo;
+                    }, {}),
                 mode: 'usage',
                 coreJs: '3',
             },
@@ -28,6 +35,6 @@ export function buildSwcOptions(targets, config, isJsx, isTs, minify = false) {
             isModule: 'unknown',
             minify: minify ? {} : false,
         },
-        config.swcLoader || {},
+        config.swc?.loader || {},
     );
 }

packages/fes-plugin-swc/types.d.ts

@@ -0,0 +1,7 @@
+declare module "@fesjs/fes" {
+    interface PluginBuildConfig {
+        swc?: {
+            loader?: object;
+        };
+    }
+}

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();

packages/fes-template/.fes.js

@@ -1,11 +1,13 @@
 import { defineBuildConfig } from '@fesjs/fes';
 
 export default defineBuildConfig({
-    swcLoader: {
+    swc: {
+        loader: {
             env: {
                 coreJs: '3.27',
             },
         },
+    },
     targets: {
         chrome: '78',
     },

packages/fes-template/package.json

@@ -60,10 +60,9 @@
     "@fesjs/plugin-vuex": "^3.0.0-rc.0",
     "@fesjs/plugin-watermark": "^3.0.0-rc.0",
     "@fesjs/plugin-windicss": "^3.0.0-rc.0",
-    "@swc/core": "^1.3.32",
+    "@fesjs/plugin-swc": "^3.0.0-rc.0",
     "core-js": "3.27.0",
     "pinia": "^2.0.11",
-    "swc-plugin-vue-jsx": "^0.2.0",
     "vue": "^3.2.37",
     "vuex": "^4.0.0"
   },