由于 .env 文件，你能阻止 Webpack 捆绑无法访问的模块吗

Question

例如：

import axios from 'axios'
 if(process.env.USE_AXIOS) {
    axios.get("/");
 }

在此 Axios 不应从 Webpack 中捆绑。

Answer 1

可能有几种方法来处理条件编译，但我知道它有效的一种方法是使用动态导入

// Just to not throw an exception in the snippet
const process = {
 env:{
   USE_AXIOS: false
 }
}
// ------------------------------------------------






// Solution
if (process.env.USE_AXIOS) {
  import('axios').then(({default: axios}) => {
    if ('get' in axios) {
      console.log('axios in use');
    }
  });
}

完整的代码示例在这里webpack-conditional-complation

您可以检查生成的代码

这里有一个 axios 捆绑在单独的文件中
这里是编译后的 ./src/include-axios-base-on-env.js 到 with-axios.js 带有标志 USE_AXIOS=true
这里是编译后的 ./src/include-axios-base-on-env.js 到 without-axios.js 带有标志 USE_AXIOS=false

由于 .env 文件，你能阻止 Webpack 捆绑无法访问的模块吗

Can you stop Webpack from bundling unreachable modules because of .env file

javascript

node.js

typescript

reactjs

webpack