跨多个Browserify或Webpack捆绑包共享通过NPM加载的模块的简单解决方案 [英] Simple solution to share modules loaded via NPM across multiple Browserify or Webpack bundles

问题描述

在这里拔头发寻找一种简单解决方案，以在多个Browserify或Webpack捆绑包中共享通过NPM所需的代码。在想，是否有文件桥之类的东西？

Pulling my hair out here looking for a simple solution to share code, required via NPM, across multiple Browserify or Webpack bundles. Thinking, is there such a thing as a file "bridge"?

这不是由于编译时间（我知道注意），而是因为将我所有供应商特定的库提取到 vendor.js 中，以保持 app.js 文件的大小不变，大量的源贴图使浏览器崩溃。另外，如果需要查看已编译的js，我发现它更干净。如此：

This isn't due to compile time (I'm aware of watchify) but rather the desire to extract out all of my vendor specific libs into vendor.js so to keep my app.js filesize down and to not crash the browser with massive sourcemaps. Plus, I find it way cleaner should the need to view the compiled js arise. And so:

// vendor.js

require('react');
require('lodash');
require('other-npm-module');
require('another-npm-module');

从NPM（而不是Bower）中加载代码，或保存到某些供应商中，这一点非常重要目录，以便通过相对路径导入并通过垫片进行标识。除了我的实际应用程序源之外，我想保留所有通过NPM获取的库引用。

Its very important that the code be loaded from NPM as opposed to Bower, or saved into some 'vendor' directory in order to be imported via a relative path and identified via a shim. I'd like to keep every library reference pulled via NPM except for my actual application source.

在 app.js 中，我保留了所有源代码，并通过 externals 数组，从编译中排除上面列出的供应商库：

In app.js I keep all of my sourcecode, and via the externals array, exclude vendor libraries listed above from compilation:

// app.js 

var React = require('react');
var _     = require('lodash');

var Component = React.createClass()

// ...

然后在 index.html 中，我需要两个文件

And then in index.html, I require both files

// index.html
<script src='vendor.js'></script>
<script src='app.js'></script>

使用Browserify或Webpack，如何使它成为 app.js 可以看到通过npm加载的模块吗？我知道要创建一个与外部对象绑定的包，然后通过别名引用直接文件（例如， node_modules ），但我希望找到一个解决方案，更自动化，更少 Require.js之类的。

Using Browserify or Webpack, how can I make it so that app.js can "see" into those module loaded via npm? I'm aware of creating a bundle with externals and then referencing the direct file (in, say, node_modules) via an alias, but I'm hoping to find a solution that is more automatic and less "Require.js" like.

基本上，我想知道是否有可能将两者桥接起来，以便 app.js 可以在里面查看 vendor.js 来解决依赖关系。这似乎是一个简单，直接的操作，但我似乎无法在如此宽广的网络上的任何地方找到答案。

Basically, I'm wondering if it is possible to bridge the two so that app.js can look inside vendor.js in order to resolve dependencies. This seems like a simple, straightforward operation but I can't seem to find an answer anywhere on this wide, wide web.

谢谢！

推荐答案

对于webpack，您将使用多次输入点和 CommonChunkPlugin 。

With webpack you'd use multiple entry points and the CommonChunkPlugin.

来自 webpack文档：

要将您的应用拆分为2个文件，请说 app.js 和 vendor.js ，则可以在 vendor.js 中要求供应商文件。然后将此名称传递给CommonChunkPlugin，如下所示。

To split your app into 2 files, say app.js and vendor.js, you can require the vendor files in vendor.js. Then pass this name to the CommonChunkPlugin as shown below.

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(
        /* chunkName= */"vendor",
        /* filename= */"vendor.bundle.js"
    )
  ]
};

这将从应用程序块中删除供应商块中的所有模块。 bundle.js 现在将仅包含您的应用程序代码，而没有任何依赖关系。这些位于 vendor.bundle.js 中。

This will remove all modules in the vendor chunk from the app chunk. The bundle.js will now contain just your app code, without any of it’s dependencies. These are in vendor.bundle.js.

在HTML页面中加载供应商。在 bundle.js 之前的bundle.js 。

In your HTML page load vendor.bundle.js before bundle.js.

<script src="vendor.bundle.js"></script>
<script src="bundle.js"></script>

这篇关于跨多个Browserify或Webpack捆绑包共享通过NPM加载的模块的简单解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！