Связывание приложения реакции, созданного с помощью npx create-react-app, с файлом .js с помощью Webpack

Я новичок в использовании ReactJS, прямо сейчас я делаю виджет, используя React, и я создаю разные компоненты, я создал приложение, используя npx create-react-app, и все работает, но теперь я пытаюсь объединить все компоненты, css и файлы в одном файле .js, чтобы можно было установить виджет на веб-страницу.

Мой код таков:

Структура

index.js

index.js

App.js

App.js

я только что видел пару сообщений и блогов, в которых указано, что мне нужно создать свой собственный файл webpack.config.js и добавить что-то вроде этого:

`

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const glob = require('glob');

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

`

он создает файл .js, но когда я помещаю файл в html-документ, ничего не отображается


webpack reactjs npx
person porterou    schedule 09.03.2020    source источник
comment
Похоже, вы пытаетесь создать библиотеку компонентов (содержащую ваш компонент <Widget />)... Итак, вы можете проверить stackoverflow.com/questions/56970495/ и посмотрите, приведет ли это вас в правильном направлении   -  person hcs    schedule 09.03.2020

Ответы (1)


arrow_upward
6
arrow_downward

Наконец то я понял!

По умолчанию npx create-react-app создайте структуру с большим количеством конфигураций, папок и файлов, чтобы упростить начало кодирования приложения с помощью React, одна из этих конфигураций настраивает веб-пакет для создания каталога сборки, когда мы набираем npm build со всеми компонентами нашего app и позволить нам развернуть его везде, но в моем случае мне просто нужно было распространить файл .js с виджетом, который я создаю, этот файл .js можно поместить внутрь на любой HTML-странице, и виджет будет работать отдельно, независимо от страницы, чтобы сделать это, я выполнил следующие шаги:

  1. Во-первых, мне нужно изменить в файле package.json раздел scripts, чтобы указать, что webpack создаст не только каталог сборки, но и bundle.js со всеми CSS, изображениями, компонентами.
"scripts": {
    "start": "react-scripts start",
    "build": "npm run build:react && npm run build:bundle",
    "build:react": "react-scripts build",
    "build:bundle": "webpack --config webpack.config.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

Обратите внимание, что я заменил скрипт пакета, указав, что он будет выполнять build:react и build:bundle.

  1. Как мы видим, build:bundle возьмет конфигурацию webpack.config.js, в нашей начальной конфигурации у нас нет этого файла, потому что webpack автоматически настраивается npx create-react-app, поэтому нам нужно создать этот файл в корневой путь нашего приложения и создайте конфигурацию, чтобы сообщить веб-пакету, что необходимо связать все, моя конфигурация такова:
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  entry: {
    entry: './src/index.js',
  },
  output: {
    filename: "build/static/js/WidgetCL.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

Я говорю веб-пакету, что ему нужно взять файл index.js, автоматически созданный npx, в качестве точки входа, также веб-пакет создаст WidgetCL.js в качестве вывода, интересная часть находится в разделе модуля, через несколько часов или проблемы, я можно настроить два загрузчика, один для файлов .css, а другой для всех компонентов .js в моем виджете, используя Babel в качестве загрузчика.

  1. Чтобы использовать Babel, мне нужно было создать файл с именем .babelrc в корневом каталоге моего проекта и настроить его следующим образом:
{
    "presets": [
        "@babel/react" , 
        "@babel/env"  
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

После этого я просто открываю терминал и набираю npm run build, затем webpack создает папку сборки, а также папку dist с моим файлом .js внутри.

person porterou    schedule 10.03.2020