在日常前端开发中，我们经常会需要将我们的 JavaScript 代码转换为可执行文件。而实现这一功能的方法之一就是在代码顶部添加 shebang，即 #!，使得文件能够在需要时自动调用解释器解析。然而，当我们使用 Babel 进行 JavaScript 代码转换时，shebang 行会被删除，从而导致代码不可执行。这时，就需要使用 babel-plugin-shebang 插件来解决这一问题。
安装
使用 npm 在项目中安装 babel-plugin-shebang：
npm install --save-dev babel-plugin-shebang
配置
在项目根目录下创建 .babelrc 文件，并添加以下内容：
{
"plugins": ["babel-plugin-shebang"]
}如果您使用的是 babel 6.x 版本，该配置命令应为 "plugins": ["shebang"]。
示例
考虑以下 JavaScript 文件 app.js，其中我们想要添加 shebang：
#!/usr/bin/env node
console.log('Hello, World!');使用 babel 进行转换后，shebang 行将被删除：
babel app.js --out-file app-compiled.js
# app-compiled.js
console.log('Hello, World!');添加 babel-plugin-shebang 插件后，我们的 JavaScript 文件可以成功转换为可执行文件：
babel app.js --out-file app-compiled.js -x .js -x .jsx && chmod +x app-compiled.js # 执行 ./app-compiled.js # Hello, World!
深度和学习
babel-plugin-shebang 插件主要的实现步骤是对 ast 进行修改，将第一行的 shebang 行重新插入到转换后的代码中，从而得到带有 shebang 行的 JavaScript 可执行文件。
有时，我们需要更改插件的源代码以实现自定义的 shebang 行的插入。这时，需要对插件的源代码进行深入学习，并掌握 ast 的相关知识。
指导意义
使用 babel-plugin-shebang 插件可以使得我们在使用 babel 进行 JavaScript 代码转换时，不再需要手动添加 shebang 行，节省了不少的时间和精力。同时，该插件可以帮助我们生成可执行文件，使得我们的代码可以在更多的环境中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/babel-plugin-shebang