Webpack externals 排除排除某些依赖的导入-技术鸭(jishuya.cn)

Webpack externals 告诉 Webpack 从包中排除某个导入。外部通常用于排除将通过 CDN 加载的导入，例如，假设您正在使用 Vue 和 Express 实现服务器端渲染，但您的客户端代码通过 CDN 导入 Vue。假设你有以下 component.js文件：

const Vue = require(vue);

module.exports = Vue.component(hello, {
  props: [name],
  template: <h1>Hello, {{name}}</h1>
});

以上 component.js 在带有服务器端渲染的 Node.js 中完美运行。但是如何将上述组件与以下组件一起使用 index.html 文件？

<html>
  <body>
    <script src=https://unpkg.com/vue/dist/vue.js></script>

    <div></div>
    <script src=dist/component.min.js></script>
    <script>
      new Vue({ template: <hello name=World /> }).
        mount(document.querySelector(#content));
    </script>
  </body>
</html>

下面 webpack.config.js 添加 Vue 作为外部，这意味着 Webpack 不会捆绑 Vue。相反当 component.js 调用 require(vue)，Webpack 将改为返回 global.Vue。

module.exports = {
  entry: {
    component: `${__dirname}/component.js`
  },
  output: {
    path: `${__dirname}/dist`,
    filename: [name].min.js
  },
  target: web,
  externals: {
    // Stubs out `require(vue)` so it returns `global.Vue`
    vue: Vue
  }
};

Excluding Node.js Polyfills

externals 的另一个用例是需要在 Node.js 中使用 polyfill 的浏览器 API，例如 FormData 。如果您正在测试需要 FormData 在 Node.js 中，您需要使用像 form-data npm 模块。

const axios = require(axios);
const FormData = require(form-data);

const form = new FormData();
form.append(key, value);
const res = await axios.post(https://httpbin.org/post, form);
console.log(res.data);

自从 FormData 是一个浏览器API，编译上述代码时不需要捆绑它。所以你可以使用下面的 Webpack 配置：

module.exports = {
  entry: {
    http: `${__dirname}/http.js`
  },
  output: {
    path: `${__dirname}/dist`,
    filename: [name].min.js
  },
  target: web,
  externals: {
    // Stubs out `require(form-data)` so it returns `global.FormData`
    form-data: FormData
  }
};

文章版权归作者所有，未经允许请勿转载。

THE END

技术文章

Webpack externals 排除排除某些依赖的导入

Excluding Node.js Polyfills

请登录后发表评论