作为Web开发者，你有没有纠结过如何使用Webpack进行文件翻译？按照源文件的目录结构输出，就像BabelCLI转译文件一样？如果是这样，那么这篇文章就是为您准备的，让我们来看看如何去做。Webpack与bundling在通常的印象中，似乎Webpack就等于bundling，就像官方文档首页写的“bundleyour...”一样，Webpack似乎就是来做bundling的。在浏览器上，bundle非常好，以非常合理的策略加载和执行。但是在NodeJS中，情况有点不同。在NodeJS中，以子文件的形式组织和执行JS文件通常是一种更自然的做法，主要是因为源文件路径相关的逻辑有时是不可避免的，例如：在云函数或Serverless中注册事件，在一些在CLI帮助下生成的源代码。但是，如果要在此基础上增加服务端渲染（SSR）逻辑，考虑到前端部分可能已经使用Webpack引用各种文件，后端可能也不得不使用Webpack进行打包。但这也意味着我们必须做相当多的工作才能让bundle合理适配与这些源文件路径相关的逻辑。为了更方便的在NodeJS中使用Webpack，TranspileWebpackPlugin（transpile-webpack-plugin）诞生了。本插件可以将entry引用的所有文件作为输入文件列出，编译后以相同的目录格式输出到输出目录。下面一起来看看用法吧。基本用法给定src目录下的2个文件，其中一个导出一个字符串常量，另一个引用这个常量并将其打印出来。初始文件结构大致如下：.├──src/│├──constants.js│└──index.js├──package.json└──webpack.config.js现在，我们需要把使用Webpack将文件翻译到dist目录下，像这样：.├──dist/│├──constants.js│└──index.js...首先我们要保证webpack（v5）和webpack-cli(v4)已经安装：$npmi-Dwebpackwebpack-cli然后，在安装transpile-webpack-plugin(v1)之后：$npmi-Dtranspile-webpack-plugin,调整webpack.config.js:constTranspilePlugin=require('transpile-webpack-plugin');module.exports={entry:'./src/index.js',output:{path:__dirname+'/dist',},插件:[newTranspilePlugin()],};最后，执行npxwebpack。这样，条目直接或间接引用的所有文件都将被收集为输入文件，然后根据输入文件的共同路径，计算输出目录中每个文件的相对输出路径，然后输出文件是根据这些路径生成的，保留了源文件的目录结构。我们可以通过nodedist/index.js或查看生成的代码来验证输出。处理SSR假设前端部分已经用Webpack构建，涉及到各种文件的转换和非JS静态资源的发出。现在我想在后端部分（NodeJS服务器）做SSR，但在运行时保留源文件。目录结构。那么我们只需要复用前端部分的Webpack配置，关闭所有非JS静态资源的emitting，并在plugins中添加newTranspilePlugin()即可。Transpile插件经过严格测试，完全兼容各种Webpack设置，包括resolvealiases、externals、sourcemaps等。更多使用Transpile插件有几个可用的配置项，最常用的两个可能是longestCommonDir和extentMapping。默认情况下，Transpile插件以输入文件的公共目录为基目录，计算输出目录下每个输出文件的相对路径。但有时输入文件可能位于嵌套很深的目录下。如果我们想保留这个嵌套结构，我们可以使用longestCommonDir。给定输入文件src/server/index.js、src/server/constants/greeting.js和输出目录dist，当此配置未定义时，输出文件将为dist/index.js、dist/constants/greeting。js。这个配置是'./src'，输出文件将是dist/server/index.js,dist/server/constants/greeting.js。默认情况下，Transpile插件生成的输出文件与输入文件具有相同的文件名。（NodeJS会把不知道后缀的文件当成JS文件。）但是有时候我们想改变文件后缀，比如把.ts改成.js，那么通过配置项extensionMapping是{'.ts':'.js'}会做的。讨论问题？希望TranspileWebpackPlugin(transpile-webpack-plugin)可以让我们更方便的在NodeJS中使用Webpack。如果大家有什么问题或者建议，可以在评论区留言或者直接在transpile-webpack-plugin/issues下issue，欢迎一起讨论。
