0

我对 React 很陌生，但我想设置

BODYMOVIN_EXPRESSION_SUPPORT在 Webpack 的用 Gatsby v1 定义插件。我按照下面的链接，但我不明白我到底想做什么......

https://github.com/QubitProducts/react-bodymovin

https://www.gatsbyjs.org/docs/environment-variables/

我将文件命名.env.development为 src 文件夹。该文件中的内容如下。

plugins: ([
    new webpack.DefinePlugin({
        BODYMOVIN_EXPRESSION_SUPPORT: true
    })
])

文件夹结构是

root--
     |
     |- public       //where the build goes
     |
     |- src --       //where I develop site
             |-components
             |-data
             |-pages
             |-style
             |-.env.development

我注意到有一行说

/*global BODYMOVIN_EXPRESSION_SUPPORT*/

在 bodymovin 库中，我想我只需要改变它。我可以直接在库中进行修改，但我认为这不是解决这个问题的最佳方法。有人知道如何正确设置吗？

提前致谢！

4

1 回答 1

1

编辑 2019-09-02

要使用 .env 文件中的环境变量，我建议使用dotenv，因为它非常简单。这是一个示例，它在 .env 文件中创建所有变量的对象，并通过 DefinePlugin 使它们在客户端（即在 React 中）可访问。

// gatsby-node.js

var dotenv = require('dotenv');
const env = dotenv.config().parsed;
// Create an object of all the variables in .env file
const envKeys = Object.keys(env).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(env[next]);
  return prev;
}, {});

exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => {
  actions.setWebpackConfig({
    plugins: [
      // Add the environment variables to webpack.DefinePlugin with define().
      plugins.define(envKeys)
    ]
  });
};

这是我如何从服务工作者获取应用程序名称和版本package.json并在服务工作者中使用它的示例，不过我使用的是 Gatsby V2。在服务工作者中拥有版本使缓存更容易处理。正如您所写，DefinePlugin 是要走的路，但是当我们在 Gatsby 中使用它时，它有点不同。

我们需要导入package.json文件并添加我们的自定义 webpack 配置gatsby-node.js，plugins.define()我们告诉 webpack 使用 DefinePlugin：

const packageJson = require('./package');

exports.onCreateWebpackConfig = ({
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    plugins: [
      plugins.define({
        __NAME__: JSON.stringify(packageJson.name),
        __VERSION__: JSON.stringify(packageJson.version),
      }),
    ],
  })
}

__NAME__这两个定义的变量__VERSION__现在可以在我的服务工作者中访问sw.js：

self.addEventListener('install', function (e) {
  // eslint-disable-next-line
  console.log(__NAME__, __VERSION__);
  e.waitUntil(
    caches.open(__NAME__ + __VERSION__).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

盖茨比参考：https ://www.gatsbyjs.org/docs/add-custom-webpack-config/

于 2019-04-08T15:41:09.300 回答