如何使用 webpack 保持我的 shebang 到位？答案

【问题标题】：How to keep my shebang in place using webpack?如何使用 webpack 保持我的 shebang 到位？
【发布时间】：2017-04-06 21:54:28
【问题描述】：

有没有办法让 Webpack 将 #!/usr/bin/env node 保留在我的文件顶部？

我正在尝试将 CLI 与模块捆绑在一起...仅使用一个配置文件单独导出我的 index.js / cli.js 有点棘手...并使 cli 需要索引...我明白了工作...

但是.. 我没有找到任何方法将#!/usr/bin/env node 保留在我的 cli 文件顶部，有什么想法吗？

简而言之，webpack 会输出这样的文件：

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;
..............................................................

但我需要的是

#!/usr/bin/env node //<------ HEREEEE

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

..............................................................

【问题讨论】：

嗨，Raf，在完成需要出口的事情上做得很好。现在你为什么认为 webpack 正在移除 shebang？给我们看一些代码。
#!/usr/bin/env node 用作node cli.js 的快捷方式，因此我可以调用我的脚本，就好像它是命令行上的二进制文件一样......但是 webpack 引导程序清理了所有内容......它需要第一行包含#!/usr/bin/env node 否则它将无法工作...

标签： javascript node.js webpack

【解决方案1】：

您应该可以将BannerPlugin 与原始模式一起使用。使用此插件，您可以在捆绑包顶部添加所需的任何字符串。通过使用原始模式，它不会将字符串包装在注释中。

在您的webpack.config.js 文件中：

plugins: [
    new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true }),
]

【讨论】：

【解决方案2】：

您现在可以将 webpack-shebang-plugin 用作一体化工具集，将 hashbang 保留在源条目文件中。

BannerPlugin 仅将 hashbang 附加到您的输出包中，但它不会：

删除源文件中的 hashbang，这是 webpack 语法检查的错误。您还需要shebang-loader 或babel-plugin-shebang 来处理源文件。
确保您的输出包的文件权限为“可执行”。当您在本地 npm-link 项目以测试 bin 文件时，这很有用。

这些都是由 webpack-shebang-plugin 完成的，只需调用

new ShebangPlugin()

，并且是可配置的。

【讨论】：