Как использовать webpack.DefinePlugin с React Gatsby и React-Bodymoving?
Я новичок в React, но хочу установить
BODYMOVIN_EXPRESSION_SUPPORT в подключаемом модуле Webpack Define с 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, и я думаю, мне просто нужно это изменить. Возможно, я мог бы изменить библиотеку напрямую, но я не думаю, что это лучший способ обойти эту проблему. Кто-нибудь знает, как это правильно настроить?
Заранее спасибо!
Ответы 1
РЕДАКТИРОВАТЬ 2019-09-02
Чтобы использовать переменные среды из файлов .env, я рекомендую использовать dotenv, потому что это очень просто. Вот пример, который создает объект всех переменных в файле .env и делает их доступными на стороне клиента (то есть в React) через DefinePlugin.
// 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 и добавить нашу настраиваемую конфигурацию веб-пакета в gatsby-node.js, с plugins.define() мы говорим веб-пакету использовать 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.info(__NAME__, __VERSION__);
e.waitUntil(
caches.open(__NAME__ + __VERSION__).then(function(cache) {
return cache.addAll(filesToCache);
})
);
});
Ссылка на Гэтсби: https://www.gatsbyjs.org/docs/add-custom-webpack-config/