购物车
登陆 / 注册
微信扫码登陆

推荐手册

expose-loader


The expose loader adds modules to the global object. This is useful for debugging, or supporting libraries that depend on libraries in globals.

安装

npm i expose-loader --save

用法

注意: 模块必须在你的 bundle 中被 require() 过,否则他们将不会被暴露。

require("expose-loader?libraryName!./file.js");
// 通过属性名 "libraryName" 暴露 file.js 的 exports 到全局上下文。
// 在浏览器中,就将可以使用 window.libraryName 访问。

例如,假设你要将 jQuery 暴露至全局并称为 $

require("expose-loader?$!jquery");

然后,window.$ 就可以在浏览器控制台中使用。

或者,你可以通过配置文件来设置:

webpack v1 用法

module: {
  loaders: [
    {
     test: require.resolve("jquery"), loader: "expose-loader?$" 
     }
  ]
}

webpack v2 用法

module: {
  rules: [{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: '$'
    }]
  }]
}

除了暴露为 window. $ 之外,假设你还想把它暴露为 window.jQuery。 对于多个暴露,你可以在 loader 字符串中使用 !

webpack v1 用法

module: {
  loaders: [
    {
     test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" 
     },
  ]
}

webpack v2 用法

module: {
  rules: [{
          test: require.resolve('jquery'),
          use: [{
              loader: 'expose-loader',
              options: 'jQuery'
          },{
              loader: 'expose-loader',
              options: '$'
          }]
      }]
}

require.resolve 是一个 node.js 调用(与 webpack 处理流程中的 require.resolve 无关)。require.resolve 用来获取模块的绝对路径("/.../app/node_modules/react/react.js")。所以这里的暴露只会作用于 React 模块。并且只在 bundle 中使用到它时,才进行暴露。

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号