Я создал приложение React с использованием create-реагировать-приложение и извлек его, чтобы получить больше контроля над процессом сборки и превратить его в расширение браузера.
Мне нужна сборка дляработать правильно, если есть только один входной файл, но теперь, когда я пытаюсь создать 2 дополнительных файла (которые должны быть отделены от основного, поскольку они будут фоновыми файлами), я получаю ошибки при сборке, не зная, почемуэто происходит. Мне просто нужно иметь 1 файл с html-страницей с javascript (реагировать), а остальные 2 мне просто нужно быть файлами javascript для функций расширения.
Это исходная точка входа в файл Webpack:
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve("react-dev-utils/webpackHotDevClient"),
// Finally, this is your app's code:
paths.appIndexJs
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
Чтобы система могла выплевывать отдельные файлы javascript, я добавил еще 2 точки входа, например:
entry: {
app: [
isEnvDevelopment &&
require.resolve("react-dev-utils/webpackHotDevClient"),
paths.appIndexJs
].filter(Boolean),
background: [
isEnvDevelopment &&
require.resolve("react-dev-utils/webpackHotDevClient"),
paths.backgroundIndexJs
].filter(Boolean),
content: [
isEnvDevelopment &&
require.resolve("react-dev-utils/webpackHotDevClient"),
paths.contentIndexJs
].filter(Boolean)
},
appIndex- backgroundIndex и contentIndex определены в путифайл и указание на действительные каталоги.
При попытке запустить npm запустите build build на этом, я получаю сообщение об ошибке:
Cannot read property 'filter' of undefined
и не могу понять, что происходит с этим.
Я не могу ничего узнать о том, почему для этой точки входа требуется ".filter (Boolean)" или где я могу отключить ее, чтобы она не требовалась при сборке.
Я подумал, может быть, яможно построить так:
entry: {
app: paths.appIndexJs,
background: paths.backgroundIndexJs,
content: paths.contentIndexJs
},
, но это также возвращает ту же ошибку со свойством canot read 'filter' of undefined.
Из любопытства я попробовал следующее, от которого я отказалсяrstand объединяет файлы:
entry: [
paths.appIndexJs,
paths.backgroundIndexJs,
paths.contentIndexJs
].filter(Boolean),
И проект строится, но даже тогда я не вижу ни одной функции из двух разных файлов.
Я создалРеагируйте на приложения с нуля, и я знаю, что метод множественных точек входа работает для создания нескольких файлов, но когда проект был создан с помощью команды create-реагировать-приложение и извлечен, я не могу заставить точку входа работать так, как ожидалось.
Я думаю, что проблема здесь не в том, как задается запись, а в ошибках, которые появляются при попытке построить без "фильтра (логического)", установленного в строке ввода.
Единственное отличие, которое яИз «обычного» и извлеченного приложения create-реакции-приложения видно, что «обычный» способ для веб-пакета выглядит следующим образом:
// This has worked in the past when making configs from scratch
module.exports = {
entry: {
app: paths.appIndexJs
background: paths.backgroundIndexJs
paths.contentIndexJs
},
и извлеченное приложение-реакции-приложения выглядит следующим образом:
// this is auto generated and unsure if is the reason why it fails to
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === "development";
const isEnvProduction = webpackEnv === "production";
......
return {
entry: {
app: [paths.appIndexJs]
background: [paths.backgroundIndexJs],
content: [paths.contentIndexJs]
},
.....
};
};
Не уверен, оказывает ли это какое-либо влияние на точки входа, но я не вижу ничего другого, что может иметь отношение к этому.
Что такое фильтр сообщений об ошибках (булево) и какможно обойти это?