webpackで実行可能ファイルを出力する

Question

現在、ノードCLIツールを作成しており、webpackを使用してすべての資産をバンドルしています。このアプリケーションのエントリーポイントは、私が実際にprocess.argvを解析してコマンドを実行するjsファイルです（参考のために私はtj/commanderを使用しています）。このようにして、バンドルが完了したら、./<outputFile>と入力するとアプリケーションが実行されます。

import cli from './cli'; 

cli.parse(process.argv); 

// If nothing was supplied 
if (!process.argv.slice(2).length) { 
    cli.outputHelp(); 
} 

バンドルが正常に動作しますが、私は実行可能ファイルとして出力するWebPACKのファイルを取得することはできません：エントリファイルは次のようになります。 chmod +x <outputFile>を実行すると、すべて正常に動作します。出力ファイルを許可する権限をwebpackに伝える方法はありますか？

Answer 1

簡単な方法の1つはnpmを使用することです。あなたのプロジェクトにpackage.jsonがありますか？ package.jsonのscriptsセクションに"build": "webpack && chmod +x outputFile"を追加し、npm run buildを実行してプロジェクトをビルドします。 preとpostビルドハンドラ

終わりにjsのコードを実行し、使用on-build-webpack pluginを、持っているthis answerから

• 単純なプラグイン：

  もう一つの方法は、あなたのwebpack.config.jsにこれらのソリューションの1を追加することですWebpack構築プロセスの概要

は、あなたが選択したものは何でも、あなたは、コードのこの部分を追加する必要があります：

var chmod = require('chmod'); 
chmod("outputFile", 500); 

Answer 2

oklasのソリューションは、私のために完全に働いた@、私は本当に試してみてのWebPACK以内にこのすべてを維持したいが。あなたのニーズに合ったいずれかの方法

plugins: [ 
    // ...plugins, 

    function() { 
    this.plugin('done',() => { 
     fs.chmodSync('bin/program-name.js', '755'); 

     // When the webpack output doesn't have a .js extension, minification fails :(
     fs.renameSync('bin/program-name.js', 'bin/program-name'); 
    }) 
    }, 
] 

使用：もう少し、これはすべての非常に単純なプラグインによって行うことができることを考えた後、私が実現しました！

Answer 3

#!/usr/bin/env nodeをファイルの上に追加する必要があります。
私は誰ものWebPACKのBannerPluginについての事を言っていない驚いてshelljs

plugins: [ 
    // ...plugins, 
    function() { 
     this.plugin('done',() => { 
     shell 
     .echo('#!/usr/bin/env node\n') 
     .cat(`${__dirname}/build/outputfile.js`) 
     .to(`${__dirname}/commandname`) 
     shell.chmod(755, `${__dirname}/commandname`) 
    }) 
    }, 
] 

Answer 4

を使用して、このWebPACKのプラグインになってしまいました。私は@oklasよりも似た何かをするが、特定のノードシェバングを追加するBannerPluginを使用して：あなたの場合は、BTW

"scripts": { 
    "build": "webpack && chmod +x dist/mycommand" 
} 

：

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

その後、私は単に私のpackage.jsonファイルにchmodを追加し、実行権限を追加しますwebpackを使用するのは、WebpackShellPluginを使用することができます（この方法を使用すると、新しい依存関係を追加する必要があることに注意してください）。

const WebpackShellPlugin = require('webpack-shell-plugin') 
{ 
    // [...] 
    plugins: [ 
    new WebpackShellPlugin({ 
     onBuildEnd:['chmod +x dist/mycommand'], 
    }), 
    ], 
} 

あなたは依存関係としてWebpackShellPluginを含めないようにしたい場合は、あなたは私がやるとすると考えていなかった@taylorc93