Question

所以，我没有使用Node或WebPack服务器端，但仍然希望不时地使用来自npm的模块。我的客户端使用requirejs，所以我需要AMD（首选）或CommonJS中的模块。

我想要的是一个脚本，它将模块名称+“external dependencies”作为参数，并创建一个包含所有其他deps的模块。

E.g。

sh npmtoamd.sh draft-js react react-dom

它创建了一个ES5 AMD模块，其中包含draft-js及其所有依赖项，不包括react和react-dom。如果不可能，例如。包括模块中的css文件和其他非js内容，例如提供它们。 draft-js.css是可以容忍的。

虽然我不使用Node或Webpack服务器端，但我们可以在上述脚本中使用npm和webpack。

从npm获取模块是一件非常重要的事情，但我对如何处理webpack部分感到很遗憾。我知道有一个事实，虽然我可以在早些时候通过帮助做到这一点，但是不要把它放在任何地方，也不知道它是怎么回事。

Answer 1

我认为正如elmigranto评论的那样，Browserify正是您所寻找的。与其名称不同，它可以在浏览器环境和节点环境中使用。简而言之，它是这样做的：

Browserify从您提供的入口点文件开始，并使用源代码的抽象语法树的静态分析搜索它找到的任何require（）调用。

对于每个带有字符串的require（）调用，browserify会将这些模块字符串解析为文件路径，然后递归搜索这些文件路径以寻找require（）调用，直到访问整个依赖关系图。

每个文件都连接成一个javascript文件，其最小的require（）定义将静态解析的名称映射到内部ID。

这意味着您生成的捆绑包是完全独立的，并且具有您的应用程序需要的所有工作，并且开销非常小。

如果您查看了一些demos，您可以看到所有依赖项（及其共同依赖项）都捆绑在一个文件中。
一个简单的例子：

browserify main.js -o bundle.js

关于使用AMD Browserify supports it使用AMD {。}} 使用AMD模块：

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

Answer 2

我最终在java中使用npm fetch thingy而不是批处理脚本，最后让它运行起来。但是没有让浏览器工作。

继承人的所作所为：

创建以下webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
    filename: 'bundle.js',
    library:"<modulename>",
    libraryTarget:"amd"       
},
externals: {

        react: "React",
    "react-dom": "ReactDOM",
    immutable:"Immutable",
    moment:"Moment"
    }   

};

npm install <modulename>

创建以下main.js

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

正在运行webpack main.js

如何从npm获取模块作为独立的AMD / CommonJS模块

2 个答案: