Пакетное приложение реакции, созданное с помощью npx create-Reaction-app, в файл. js с помощью Webpack - PullRequest
Новая
       6

Пакетное приложение реакции, созданное с помощью npx create-Reaction-app, в файл. js с помощью Webpack

0 голосов
/ 09 марта 2020

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

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

Structure

index. js

index.js

Приложение. 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, ничего не отображается

1 Ответ

0 голосов
/ 10 марта 2020

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

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

1) Во-первых, мне нужно изменить в файле «package. json» раздел «scripts», чтобы указать, что webpack создаст не только каталог «build», но и комплект. js со всеми CSS, images, components. 

  "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"

},

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

2) Как мы видим, "build: bundle" w Примем конфигурацию «webpack.config. js», в нашей начальной конфигурации у нас нет этого файла, потому что webpack автоматически настраивается с помощью «npx create-response-app», поэтому нам нужно создать этот файл в root путь нашего приложения и создание конфигурации, чтобы сообщить веб-пакету, который должен объединить все, моя конфигурация такова: 

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()],
}

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

3) Чтобы использовать Babel, мне нужно было создать файл с именем .babelr c в пути root моего проекта и настройте его таким образом 

{
     "presets": [
            "@babel/react" , 
            "@babel/env"  
      ],
      "plugins": [
            "@babel/plugin-proposal-class-properties"
      ]
}

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

...