Eine ausführbare Datei mit Webpack ausgeben

Question

Ich schreibe gerade ein Knoten-CLI-Tool und verwende Webpack, um alle meine Assets zu bündeln. Der Einstiegspunkt für diese Anwendung ist die js-Datei, wo ich tatsächlich process.argv analysieren und einen Befehl ausführen (als Referenz verwende ich tj/commander). Auf diese Weise kann ich, sobald die Bündelung abgeschlossen ist, ./<outputFile> eingeben und meine Anwendung wird ausgeführt. Der Eintrag Datei sieht wie folgt aus:

import cli from './cli'; 

cli.parse(process.argv); 

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

Die Bündelung funktioniert gut, aber ich kann nicht webpack ausgeben, die Datei als ausführbare Datei erhalten. Sobald ich chmod +x <outputFile> laufen lasse, funktioniert alles perfekt. Gibt es eine Möglichkeit, dem Webpack mitzuteilen, welche Berechtigungen eine Ausgabedatei gewähren soll?

Answer 1

Ein einfacher Weg ist, npm zu verwenden. Haben Sie eine package.json in Ihrem Projekt? Fügen Sie "build": "webpack && chmod +x outputFile" zum scripts Abschnitt Ihrer package.json hinzu und erstellen Sie Ihr Projekt, indem Sie npm run build ausführen.

Eine andere Möglichkeit ist eine dieser Lösungen für Ihre webpack.config.js hinzuzufügen:

• einfaches Plugin von this answer die pre und post Build-Handler hat

• Verwendung on-build-webpack plugin, die am Ende js Code ausführt des Webpack-Build-Prozesses

Was auch immer Sie sich entscheiden, Sie brauchen dieses Stück Code hinzuzufügen:

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

Answer 2

Obwohl @ oklas-Lösung perfekt für mich gearbeitet, ich wollte wirklich versuchen und dies alles innerhalb webpack zu halten. Ich erkannte, nach ein wenig mehr gedacht, dass dies alles durch ein sehr einfaches Plugin getan werden könnte:

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'); 
    }) 
    }, 
] 

Verwendung Je nachdem, wie der Ihren Bedürfnissen entspricht!

Answer 3

Sie müssen #!/usr/bin/env node an der Spitze der Datei anhängen.
endete ich mit diesem webpack Plugin up 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

mit Ich bin überrascht, niemand sagte etwas über webpack des BannerPlugin.Ich mache etwas ähnliches als @oklas, aber BannerPlugin mit dem bestimmten Knoten shebang hinzuzufügen:

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

Dann fügen Sie einfach ich die Ausführungsberechtigungen nur das Hinzufügen chmod meiner package.json Datei:

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

BTW, wenn Sie Wenn du nur Webpack benutzen willst, kannst du das WebpackShellPlugin verwenden, wie es von oklas gesagt wurde (beachte, dass du dadurch eine neue Abhängigkeit hinzufügen musst, deshalb vermeide ich diesen Ansatz):

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

Wenn Sie mit WebpackShellPlugin als eine Abhängigkeit vermeiden möchten, können Sie versuchen, eine benutzerdefinierte Plug-in auf fs Basis zu definieren, wie gesagt von @taylorc93