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

How to fetch modules from npm as standalone AMD/CommonJS modules

所以,我没有在服务器端使用 Node 或 WebPack,但仍然想时不时地使用 npm 中的模块。我的客户端使用 requirejs,所以我需要 AMD(首选)或 CommonJS 中的模块。

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

例如

sh npmtoamd.sh draft-js react react-dom

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

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

从 npm 获取模块是微不足道的部分,但我完全不知道如何做 webpack 部分。我知道这是可能的,因为我早些时候在帮助下设法做到了,只是不要把它放在任何地方,也不知道它是怎么回事。

我认为正如 elmigranto 评论的那样,Browserify 正是您要寻找的。顾名思义,它既可以在浏览器环境中使用,也可以在节点环境中使用。简而言之,它是这样做的:

Browserify starts at the entry point files that you give it and searches for any require() calls it finds using static analysis of the source code's abstract syntax tree.

For every require() call with a string in it, browserify resolves those module strings to file paths and then searches those file paths for require() calls recursively until the entire dependency graph is visited.

Each file is concatenated into a single javascript file with a minimal require() definition that maps the statically-resolved names to internal IDs.

This means that the bundle you generate is completely self-contained and has everything your application needs to work with a pretty negligible overhead.

如果您查看一些 demos,您可以看到所有依赖项(及其相互依赖项)都捆绑到一个文件中。
一个简单的例子:

browserify main.js -o bundle.js

关于使用 AMD Browserify supports it by using deamdify
使用 AMD 模块:

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

我最终在 java 中执行了 npm fetch thingy 而不是批处理脚本,并最终让它运行起来。但是没有让 browserify 工作。

我是这样做的:

  1. 正在创建以下 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"
        }   
    
    };
    
  2. npm install <modulename>

  3. 正在创建以下内容main.js

    define('FOOBAR', ['<modulename>'], function(Foo) {
       return Foo;
    });
    
  4. 运行 webpack main.js