网络技术每年都在不断发展。现代编程语言需要在现代环境中运行，尽管现代网络浏览器通常支持很酷的新功能，但旧版本的浏览器却不支持。
但是，如果网络开发者需要建立同时兼容新旧技术的网站，他们怎么能写出仍能在旧浏览器中运行的现代代码呢？
这就是JavaScript编译器发挥作用的地方。与其他语言的编译器类似，JavaScript将现代JS代码编译成可以在旧浏览器中运行而不损失功能的代码。
使用webpack和Babel的劣势
当涉及到捆绑现代JavaScript代码时，Webpack和Babel是标准工具。Babel主要用于将现代的JavaScript转换为旧版本，以便能够被旧的浏览器支持。
使用这些工具的最大缺点是，创建时间会变得繁琐冗长，特别是对于大型项目。因此，缩短创建时间可以简化你的项目--最终节省时间、金钱和开发人员的神经。
什么是SWC？
有一个项目提高了JavaScript编译工具的性能，它就是SWC。它是一个用Rust编写的编译器，声称比Babel快得多。例如，它的效率就是Next.js从Babel转到SWC的原因。
在早期的测试中，以前使用Babel的代码转换从
500ms降到10ms，使用SWC的Terser的代码缩减从250ms降到30ms。总体而言，这使得构建速度提高了一倍。
所以，SWC比webpack和Babel快得多，但如果你已经用这些工具启动了你的项目，怎么办？是否可以从这种设置切换到SWC工具？
是的，可以。让我们来看看怎么做。
从webpack和Babel迁移到SWC
假设你有一个简单的Web应用程序，有一个HTML文件和一些JavaScript文件。这些文件是用webpack捆绑的，JavaScript文件是用Babel编译的。
捆绑应该如何进行，哪种文件类型应该使用哪种编译器，以及许多配置选项都在webpack配置文件中定义，该文件可能看起来像这样。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
],
},
};
现在，如果你想用SWC来捆绑你的文件，而不是用Babel，你有两个选择。
你可以替换编译器，继续使用webpack，或者你可以使用SWC自己的捆绑器spack，它可以完全取代webpack和Babel。
让我们先从第二个选项开始。
用SWC的spack捆绑器完全取代webpack和Babel
要完全取代Babel和webpack，你可以使用内置的捆绑器，即spack。当你运行它时，它将自动安装。
npm i --save-dev @swc/core swc-loader
现在，与webpack.config.js 文件类似，你需要在你项目的根目录下创建一个名为spack.config.js 的文件，其形式如下。
module.exports = {
entry: { web: __dirname + "/src/index.js", },
output: { path: __dirname + "/lib", },
};
你可以参考官方文档，看看你可以用它设置哪些其他配置。
如果你想看真实的例子，你可以访问SWC项目的GitHub页面，那里已经创建了一些简单的例子来最好地展示spack和SWC的工作原理。
要构建你的项目，请在你的项目的根目录下运行npx spock 。该脚本将自动接受配置，并使用SWC来编译你的JavaScript代码，然后将其放在你定义的输出路径中。
**注意：**在写这篇文章的时候，我不建议在生产项目中使用spack，因为它还在开发中。文档中缺少信息，许多功能，如自定义加载器和创建多个捆绑包，目前还不能使用或没有文档。
由于spack的文档和开发工作尚未完成，这个选项可能更安全、更容易，它使用SWC作为编译器，而不是Babel。要做到这一点，你需要安装加载器，如下所示。
npm i --save-dev @swc/core swc-loader
接下来，你必须用安装好的swc-loader 替换babel-loader 。
如果你没有定义编译器，你可以简单地在你的webpack配置中添加以下内容，而不是替换它。
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
// `.swcrc` can be used to configure swc
loader: "swc-loader"
}
}
],
},
};
就这样！webpack现在将使用快如闪电的SWC编译器而不是Babel来编译你的代码。
用SWC配置和优化项目
要使用自定义配置，你可以创建一个.swcrc 文件，在这里你可以定制任何你需要的配置。
如果你使用Terser来缩减你的输出文件，SWC也为你提供了从头开始做同样缩减的选项。
你可以在.swcrc 文件中定义这个选项。大多数选项与Terser插件的选项相似，这意味着只需将Terser插件的选项复制到.swcrc 中的minify字段即可。
使用SWC的注意事项
当谈到使用spack完全替代webpack和Babel时，有一些注意事项需要考虑。首先，你的项目不一定是生产就绪的，因为到目前为止，spack的许多功能还没有完全就绪和/或缺失。
但是，如果你只使用编译器，你的项目很可能可以在生产中使用。Next.js 11.1现在使用它，并显示它相当稳定。
不过，我还是要谨慎，因为它仍然是新的，虽然Next已经在使用它，但他们正在与创建该库的开发者密切合作。
值得注意的是，仍有几个未解决的问题，而且文档也不够详细，无法配置更高级的用例。
结论
构建、捆绑和编译现代网络应用程序，如果是在管道中进行，可能会很繁琐，而且成本很高。SWC通过简化捆绑和编译过程，正面应对这一挑战。
此外，迁移Babel也很容易，到目前为止，结果令人难以置信。鉴于该项目还很年轻，而且已经有很大的潜力，我非常期待看到它的发展。
The postMigrating to SWC: A brief overviewappeared first onLogRocket Blog.
