介绍
在前端开发中，我们常常需要使用一些编译工具来将源代码转换为可运行的代码。其中一个常用的编译工具就是compiled。这个工具可以将各种语言的源代码编译成JavaScript代码，例如TypeScript、CoffeeScript等。
compiled是一个基于Babel的模块化编译器，它支持各种模块格式，包括CommonJS、ES6模块和AMD等。同时，它还支持各种插件，可以满足不同的编译需求。在本文中，我们将介绍如何使用compiled来编译源代码，并通过示例代码来说明其使用方法。
安装
首先，我们需要安装compiled。在命令行中输入以下命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @compiled/cli
这条命令会安装compiled及其依赖项。我们也需要安装Babel Core和Babel CLI，并且需要安装@babel/preset-env来配置Babel。
配置
在安装完成后，我们需要配置.babelrc文件来告诉compiled如何编译代码。在项目根目录下创建一个名为.babelrc的文件，并在其中添加以下内容：
{ "presets": ["@babel/preset-env"] }
这里，我们只使用了@babel/preset-env，这个预设包含了一组转换规则，可以根据目标环境自动选择需要的转换。如果你需要使用其他Babel插件，可以在这里添加。
编译
安装和配置完成后，我们就可以使用compiled来编译代码了。在命令行中输入以下命令：
compiled build src -d lib
其中，src是源代码所在的目录，lib是编译后的代码输出目录。-d选项表示指定输出目录。当然，你也可以使用其他选项来控制编译过程，例如--watch选项可以监听文件变化并自动重新编译。
示例代码
为了更好地说明compiled的使用方法，下面是一个示例代码。这个示例代码将一个ES6模块转换成CommonJS模块，并将其输出到dist目录下。
-- -------------------- ---- ------- -- ------------ ------ ----- --- - --- -- -- - - -- -- -------- - ---------- ---------------------- ---------- - ------------------------------------------ - - -- ------------ - ---------- - -------- --------- ----- --- -- ------ - -展开代码
在这个示例代码中，我们首先定义了一个简单的ES6模块，它导出了一个add函数。然后，我们在.babelrc中添加了@babel/plugin-transform-modules-commonjs插件，它可以将ES6模块转换为CommonJS模块。最后，在package.json中添加了一个build脚本来编译代码。
在命令行中输入npm run build即可编译代码。编译完成后，我们可以在dist目录下看到编译后的文件。
结论
compiled是一个强大的编译工具，可以满足各种编译需求。通过本文介绍的使用方法和示例代码，希望读者能够更好地掌握compiled的使用技巧，并在实际项目中应用它来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45939
