这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

前言

在现在普遍前端工程化的时候，我们时常会使用webpack/gulp等打包工具来打包项目以便开发与上线。

我们在代码中也会写入全局不可变的数据来表示一个数据，但是直接写在代码中会有一个问题，在打包的时候，我们的参数不能写入代码中。

所以这个时候我们可以使用webpack来实现这个功能。

DefinePlugin

webpack中自带了一个插件就叫做DefinePlugin，我们可以使用这个插件来实现写入全局变量。

module.exports = ({ dev = true }) => {
    entry: {},
    plugins: [
        new webpack.DefinePlugin({
            G_IS_DEV: dev
        })
    ],
    output: {}
}

上面就实现了一个自定义G_IS_DEV的全局变量。

当然这种写法我是使用了gulp来管理，在gulp中使用webpack-stream来使用这个文件并传入参数。

gulp中引入webpack文件

我们首先得安装webpack-stream这个包，然后在gulpfile.js中写入。

gulp.task('js', () => {
  return gulp
    .src('main.js')
      .pipe(
        // 在这里引入webpack配置文件
        $.webpackStream(
          require('./webpack.config.js')({
            dev: true
          })
        )
      )
      .pipe(gulp.dest(buildFolder))
  })

上面这个gulp任务就可以帮助我们使用webpack来打包js文件，并且在main.js发生改变时重新打包。

最后我们在gulp的默认任务中调用这个任务就可以了。

gulp.task("default", gulp.series("js"));

一些有趣的作用

你知道怎么在页面中打印出以上数据吗？

当然，不是你手动将这个数据写入代码中。

我们可以使用上面的知识来实现这个功能。

在webpack的配置文件中写入：

function getRevision(useLast = false){
    const commitHash = execSync('git rev-parse --short ' + (useLast ? 'HEAD^1' : 'HEAD')).toString(
      'ascii'
    )
    return commitHash.replace(/^\s+|\s+$/g, '');
},

上面这个函数可以让我们获取到git提交的短代码。

看到这里你肯定知道怎么办了吧。

module.exports = ({ dev = true }) => {
    entry: {},
    plugins: [
        new webpack.DefinePlugin({
            G_COMMIT_HASH: getRevision()
        })
    ],
    output: {}
}

这样我们就拥有一个叫做G_COMMIT_HASH的全局变量了。