Wie Module von NPM als eigenständiger AMD/Commonjs Module

Question

So holen, ich bin nicht Knoten oder WebPack server verwendet, würde aber immer noch Module wie jeder von npm hin und wieder verwenden. Meine Clients verwenden Requirejs, also würde ich die Module entweder in AMD (bevorzugt) oder CommonJS benötigen.

Was ich will archieve ist ein Skript, das den Namen des Moduls + „externe Abhängigkeiten“ als Argumente und erstellt ein Modul nimmt das alle anderen deps enthält.

z.

sh npmtoamd.sh draft-js react react-dom 

Es schafft eine ES5 AMD-Modul, das draft-js und alle darin enthaltenen ist ohne Abhängigkeiten reagieren und reagieren-dom. Wenn es nicht möglich ist, z. Fügen Sie CSS-Dateien und andere Nicht-JS-Inhalte in das Modul ein und stellen Sie sie z. draft-js.css ist tolerierbar.

Während ich nicht Node oder Webpack server nutzen, können wir npm und webpack in dem Skript.

das Modul von npm Fetching ist der triviale Teil, aber ich bin ziemlich verloren, wie die webpack Teile zu tun. Ich weiß zwar, dass es möglich ist, aber ich habe es früher mit Hilfe geschafft, ich habe es einfach nirgendwo hingelegt und keine Ahnung, wie es gelaufen ist.

Answer 1

Ich landete die npm up tun anstelle eines Batch-Skript in Java-Fetch-Ding und habe es endlich funktioniert. Habe browserify jedoch nicht zum arbeiten bekommen.

Heres, was ich tue:

1. die folgende webpack.config zu schaffen.js

   module.exports = { 
       entry: './main.js', 
       output: { 
       filename: 'bundle.js', 
       library:"<modulename>", 
       libraryTarget:"amd"  
   }, 
   externals: { 
   
        react: "React", 
       "react-dom": "ReactDOM", 
       immutable:"Immutable", 
       moment:"Moment" 
       } 
   
   }; 
   

2. npm install <modulename>

3. Erstellen der folgenden main.js

   define('FOOBAR', ['<modulename>'], function(Foo) { 
       return Foo; 
   }); 
   

4. webpack main.js

Answer 2

Ich denke, wie elmigranto kommentiert, ist Browserify, was Sie suchen. Im Gegensatz zu seinem Namen kann es sowohl in der Browserumgebung als auch in der Knotenumgebung verwendet werden. Auf den Punkt gebracht, tut es dies:

Browserify beginnt am Einspeisepunkt Dateien, die Sie es und sucht geben für jede require() ruft es mit statischen Analyse des Syntaxbaums Quellcode abstrakt findet.

Für jeden Aufruf von require() mit einer Zeichenfolge darin, löst browserify diese Modulzeichenfolgen in Dateipfade auf und durchsucht dann diese Dateipfade nach requires() -Aufrufen, bis das gesamte Abhängigkeitsdiagramm aufgerufen wird.

Jede Datei in eine einzige JavaScript-Datei mit einer minimalen require() Definition verketteten, die statisch-aufgelöste Namen auf interne IDs zuordnet.

Dies bedeutet, dass das Paket, das Sie erzeugen völlig eigenständig ist und hat alles, was Ihre Anwendung mit einem ziemlich vernachlässigbaren Overhead zu arbeiten.

Wenn Sie Sie, dass alle Abhängigkeiten sehen können einige der demos Check-out (und ihre Co-Abhängigkeiten) in einer Datei gebündelt werden.
Ein einfaches Beispiel:

browserify main.js -o bundle.js 

In Bezug auf AMD mit als auch Browserify supports it von deamdify verwenden.
Mit AMD Module:

browserify -t deamdify main.js -o bundle.js