Меняйте мир, по одной строке кода

menyajte mir po odnoj stroke koda

Людям нравится рассматривать изменение мира как большую задачу. Я верю, что изменить мир можно маленькими шагами.

Главное – определить проблему и сделать небольшой шаг.

Мое путешествие началось в пятницу, 7 сентября 2018 года. В этот день я решил создать плагин React для тестового пакета freeCodeCamp. Я заметил проблему и принял меры.

Существует рабочая версия для установки в реестре Node Package Manager. Для меня это важное событие, поскольку проект – мой первый вклад с открытым кодом.

Я использовал определенные ключевые технологии для создания проекта, таких как Webpack, React, NPM и Node.js. Мне было очень весело его строить, и я тоже многому научился.

Я пытался несколько раз (по сути целый день), прежде чем мне удалось даже заставить плагин работать.

После того, как это заработало, внедрение в программу React было сложной задачей. Хотя я столкнулся с техническими трудностями, в итоге плагин сработал.

Процесс

Идея проекта была простой. Все, что я хотел сделать, это найти простой способ добавить freeCodeCamp Test Suite в программы React.

Моим первым планом было создать его с помощью Create-React-App.

Я почувствовал, что, поскольку я могу использовать его для создания программ React, я могу использовать его для создания плагина. Я ошибался.

Create-React-App был слишком трудным для того, что мне нужно было создать.

Я нашел, что для облегчения экспорта плагина мне понадобится дополнительная конфигурация.

Я зашел в Интернет и пару раз поуглелив, и наткнулся на Webpack и react-helmet. То, что я встретил, поначалу было удивительным и запутанным.

Тем не менее, я знал, что это то, что мне нужно. Я продолжил поиски еще.

В Webpack я пытался экспортировать и опубликовать плагин как модуль без дополнительной конфигурации. Это не сработало. Ошибка новичка, я знаю.

Это был большой вызов, который мне удалось преодолеть.

К счастью, мы учимся, когда растем!

Пока я разрабатывал плагин, были неизменные отключения электроэнергии. В Нигерии ситуация с электроэнергией не слишком устроена.

Мне пришлось работать, пока мой ноутбук не выключится, а потом глубоко подумать, что делать, когда вернется питание.

Все это произошло на следующий день (суббота).

Магия, красота

Используя Webpack, я начал создавать плагин.

Я поместил основной код в файл index.js. Вот код ниже:

import React from 'react';
import { Helmet } from 'react-helmet';
import './styles.css';

const ReactFCCtest = () => {
  return (
    <div>
      <Helmet>
        <script type="text/javascript" 
                src=" >
        </script>
      </Helmet>
      <h5>react-fcctest running</h5>
    </div>
  );
};

export default ReactFCCtest;

Приведенный выше код — это все, что мне нужно, чтобы добавить сценарий к тегу head любого приложения React, которое я желал.

Я наткнулся на статью о Medium, которая мне очень помогла.

Это помогло мне понять, как использовать Webpack для создания модуля узла, который я мог бы успешно опубликовать в реестре Node Package Manager.

Я следовал инструкциям в этой статье. После внесения некоторых изменений я построил следующее webpack.config.js файл:

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "demo/src/index.html"),
    filename: "./index.html"
});
module.exports = {
    entry: path.join(__dirname, "demo/src/index.js"),
    output: {
        path: path.join(__dirname, "demo/dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins: [htmlWebpackPlugin],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    devServer: {
        port: 3001
    }
};

Позвольте мне объяснить, что делает этот файл:

>> Во-первых, он использует HtmlWebpackPlugin для создания HTML-файла для обслуживания моего пакета webpack.

>> Далее экспортируется плагин, который я создал как модуль узла.

>> Это говорит, что точка входа моего плагина находится в местоположении demo/src/index.js. Это означает, что именно отсюда будет взят код для экспорта.

>> Далее сказано, что исходный каталог моего плагина есть demo/dist. В этом каталогеreact-fcctest плагин будет экспортирован в файл с именем bundle.js.

>> Далее он представляет набор правил для файла, который нужно экспортировать.

>> Согласно правилам, файл должен делать две вещи. Во-первых, используйте babel-loader во время работы с .js и .jsx файлов и не включать node_modules папку. Во-вторых, используйте style-loader и css-loader во время работы с .css файлы.

>> Часть файла с разрешением и расширениями позволила мне оставить файл .js и .jsx с конца моих файлов при их импорте.

>> Наконец, мой сервер разработки был на порту 3001. Этот порт мог быть любым другим по моему выбору.

Я только что заметил, что красота – это упорный труд…

Я добавил Webpack в проект в воскресенье, и тогда плагин заработал!

Благодаря этому я смог создать модуль, который можно легко экспортировать. Этот модуль был ReactFCCtest.

Я не могу сказать, сколько читать-искать-спрашивать методология помогала мне в течение всего проекта.

Вот демонстрация готового плагина. Строить было очень весело.

Я протестировал это в проекте freeCodeCamp и он работал идеально.

1*OL4Q9xvDLtsMcgY21 -- tOQ
Авторство: https://giphy.com

Я создал репозиторий Github, содержащий весь открытый исходный код для проекта.

Как установить и использовать `react-fcctest`

Беги npm i react-fcctest или yarn add react-fcctest чтобы установить плагин React.

Место import ReactFCCtest from 'react-fcctest'; в вашем App.js:

import React, { Component } from 'react';
import ReactFCCtest from 'react-fcctest';

class App extends Component {
  render() {
    return (
      <div>
        <ReactFCCtest />
      </div>
    );
  }
};

export default App;

Вот и все!

Заключительные примечания

Мой 2018 год был удивительным.

Теперь я руководитель студенческого клуба разработчиков для своего университета в программе, которая работает на основе Google Developers в Африке к югу от Сахары.

Я стремлюсь к величию в космосе — возможно, я мог бы просто приземлиться на Луну. Следуйте за мной в моем путешествии.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *