ONFUNS 学习&生活随笔

记一次next.js中process.env的坑

需求:定义config文件如config.dev.js、config.sit.js等对应各个环境版本。

实现:第一反应是使用cross-env将对应的版本传入,如:VESION_ENV = 'dev' && node app.js,然后在配置文件next.config.js中。

module.exports = {
    webpack: (config, options) => {
        config.plugins.push(new webpack.DefinePlugin({
             'process.env.VESION_ENV': JSON. stringify(process.env.VESION_ENV)
            }))
          return config
    }
}

但是,报错了!!!错误信息就不列出来了,查阅相关文档原因是next.js是高度集成webpack的,并不支持引入webpack。悲催了,然后看api发现next.js中可以配置client和server共用的配置项publicRuntimeConfig。额,配置后还是不能满足我的需求。

换个思路,能不能在编译时就将这个变量赋值给全局变量呢,一查果然有工具,babel-plugin-transform-define,可以在代码转换时将变量全局化。

附上方法:

1、定义文件env.js

module.exports = {
  'process.env.VERSION_ENV': process.env.VERSION_ENV
}

2、修改babel配置文件 .babelrc.js

const env = require('./env.js')
module.exports = {
  presets: ['next/babel'],
  plugins: [['transform-define', env]]
}

总结:通过中间文件可以在代码转化阶段实现特定功能,babel太强大,得多熟悉~