aprilandjan's blog

set global variables in webpack

04月 25日, 2017
1 minute read

以下简介在 webpack 中定义、使用全局变量的方法。

定义想要全局调用模块 test

模块按照 CommonJS 的格式导出:

test.js:

module.exports = {
  log () {
    console.log('test called!')
  }
}

配置 webpack

首先要给想要全局使用的模块定义别名，无论是自定义的模块，还是来自依赖里的模块都是可以的；再使用 webpack 自带的 ProvidePlugin 把模块放在全局使用。ProvidePlugin 也可以直接使用自定义模块的路径或者依赖的模块名，因此定义 resolve alias 的步骤可以省略掉。

webpack.config.js:

var webpack = require('webpack')
var path = require('path')

// ...

module.exports = {
  resolve: {
    extensions: ['', '.js'],
    alias: {
      '$test': path.resolve(__dirname, '../src/utils/test.js')
    }
  },

  // ...
  
  plugins: {
    new webpack.ProvidePlugin({
      'test': '$test'
    })
  }
}

配置 eslint.rc

如果项目配置了 eslint 语法规范检查，很有可能会报语法规范错误 error "test" is not defined no-undef. 这是因为语法检查判断该变量没有定义或引入。解决办法是配置 eslint.rc 文件, 添加全局变量：

eslint.rc:

module.exports = {
  
  // ..
  
  "globals": {
    "test": true
  }
}