Question

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

使用Gatsby v1的Webpack的Define插件中的

BODYMOVIN_EXPRESSION_SUPPORT。我按照下面的链接进行操作，但是我不知道我该怎么做...

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库中，我想我只需要更改它。我也许可以直接在库中进行修改，但是我认为这不是解决此问题的最佳方法。有人知道如何正确设置吗？

谢谢！

Answer 1

这是一个示例，说明如何从package.json获取应用程序名称和版本，并在客户端（React）和服务工作者中使用它，但是我正在使用Gatsby V2。在Service Worker中拥有版本可以使缓存更易于处理。正如您所写，DefinePlugin是一种解决方法，但是当我们在Gatsby中使用它时则有所不同。

我们需要导入package.json文件并在gatsby-node.js中添加自定义Webpack配置，使用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/

如何在React Gatsby和React-Bodymoving中使用“ webpack.DefinePlugin”？

1 个答案: