Когда я хотел создать библиотеку компонентов React, чтобы повторно использовать свой код, я прочитал много статей и пакетов, чтобы создать шаблон для простого создания и тестирования моей библиотеки компонентов, и я нашел несколько руководств по этому поводу, но большинство из них использовали npm link для общения между приложением для игровой площадки (приложение, которое должно быть платформой для проверки результата) и нашей библиотекой компонентов, и я обнаружил, что npm link имеет некоторые проблемы с окнами.
поэтому в этой статье мы собираемся создать шаблон библиотеки компонентов реагирования без использования npm link и тому подобного.
В этой статье мы собираемся создать два отдельных проекта, один из которых является нашим проектом игровой площадки, который используется для тестирования нашей библиотеки компонентов, а второй - основным проектом, который мы используем для его создания. вверх по нашей библиотеке
с завершенным проектом можно ознакомиться по этой ссылке: https://github.com/aliyr/React-library-boilerplate/
шаг 1: создать структуру
Во-первых, мы создаем наши основные папки проекта.
откройте свой терминал и создайте эти папки:
> mkdir react-library-boilerplate > cd react-library-boilerplate > mkdir boilerplate
примечание: playground проект сделаем по-другому!
как упоминалось ранее, мы создали два отдельных проекта для создания нашей библиотеки компонентов реакции и тестирования ее в проекте игровой площадки.
шаг 2: создать шаблонный проект
второй и основной шаг, мы собираемся создать шаблонный проект. просто запустите эту команду:
> npm init package name: (boilerplate) version: (1.0.0) description: a boilerplate for easily creating and testing react component libs ! entry point: (index.js) test command: git repository: keywords: author: alious license: (ISC)
Теперь наш проект создан и готов к развитию! на втором этапе пора установить react и react-dom
> npm install react react-dom
а также babel и webpack:
> npm install --save-dev babel-cli babel-core babel-loader babel-preset-env webpack-cli webpack > npm install babel-preset-react babel-preset-es2015
Затем создайте 3 папки с именами dist, lib и src, чтобы наш проект был таким:
├--- boilerplate
├--- /src
├--- /lib
├--- /dist
├--- /node_modules
└--- package.json
следующий шаг - настроить .babelrc и webpack.config.js в корне проекта, а затем просто скопировать и вставить приведенный ниже код в webpack.config.js:
const webpack = require('webpack');
module.exports = {
devtool:'source-map',
entry: './src/index.js',
output: {
path : __dirname + "/dist",
filename : "bundle.js"
},
devServer: {
inline: false,
contentBase: "./dist",
},
module: {
rules: [
{
test:/\.js$/,
exclude:/node_modules/,
loader: "babel-loader",
},
{
test:/\.css$/,
loader : ["style-loader","css-loader"]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
"NODE_ENV": JSON.stringify('production')
}
})
]
}
и этот код на .babelrc:
{
"presets": [
"es2015",
"react"
]
}
эти коды, приведенные выше, помогают нам перенести наш код с es6 или выше на es5 (.babelrc) и получить производственную сборку из нашего проекта (webpack.config.js)
Затем в папке /src создадим компонент и назовем его Button.js:
import React , {Component} from 'react';
class Button extends Component{
constructor(props) {
super(props);
}
render() {
return(
<button>hello {this.props.text}!</button>
)
}
}
в этом компоненте нет ничего особенного, но вы можете добавить к нему больше логики и тегов JSX.
Теперь пришло время создать и перенести наш компонент. для этого мы делаем два сценария для операций транспиляции и сборки, открываем ваш package.json файл и добавляем эти две команды в "scripts":
"transpile": "node_modules/.bin/babel ./src --presets babel-preset-es2015 -d lib", "build": "webpack --progress --colors --p"
первая команда сообщает babel, что нужно получить все файлы в папке /src, преобразовать их в es5 и поместить в папку /lib.
Вторая команда просто получает производственную сборку из нашего проекта.
для следующего шага просто запустите npm run transpile. теперь мы видим, что Button.js преобразован в ES5 и готов к использованию!
чтобы сделать наш шаблон доступным для чтения другим проектом (в нашем случае playground project), мы должны сделать компонент нашим основным файлом, поэтому откройте файл package.json и измените "main": "index.js" на путь к компоненту, в нашем случае это: lib/Button.js.
Шаг 3: создайте проект детской площадки
на предыдущем шаге наш шаблонный проект был завершен и готов к использованию, и на этом шаге мы собираемся создать простой проект, который позволит нам протестировать нашу библиотеку компонентов:
давайте откроем терминал и перейдем в каталог main, создадим проект реакции через create-react-app:
> npm init react-app playground > cd playground
Теперь нам нужно импортировать наш boilerplate проект в playground проект, для этого мы должны добавить наш шаблонный путь проекта к зависимостям проекта игровой площадки, поэтому откройте package.json и добавьте это в dependencies:
"dependencies": {
...
"boilerplate": "file:../boilerplate",
...
},
на следующем шаге мы должны добавить шаблон в проект детской площадки node_modules, поэтому для этого запустите npm install.
Последнее, что нужно сделать, это добавить наш Button.js компонент в проект игровой площадки и посмотреть, что произойдет в App.js, давайте воспользуемся кнопкой:
import React, { Component } from 'react';
...
import Button from 'boilerplate';
...
class App extends Component {
render() {
return (
<div className="App">
<Button text="World" />
</div>
);
}
}
export default App;
теперь мы видим, как появляется наша кнопка!
Примечание: каждый раз, когда вы вносите изменения в свою библиотеку, вы должны запускать npm run transpile
Шаг 4: используйте gulp для улучшения нашего проекта (необязательно)
есть еще одна проблема: что, если мы хотим создать несколько компонентов и использовать их в нашем проекте игровой площадки?
Итак, есть два решения:
1 -сделайте все компоненты в один файл, а затем экспортируйте и транспилируйте их
2 -сделать каждый компонент отдельным файлом и объединить их в один файл
первый вариант - не лучшее решение для нас, потому что, если у нас много компонентов, будет очень сложно читать и редактировать код. так что второй намного лучше. Чтобы объединить наши файлы в один файл, нам нужно использовать инструмент автоматизации, который помогает нам выполнять весь процесс автоматически. Теперь давайте установим наши необходимые пакеты в шаблонный проект:
> npm i --save-dev gulp gulp-concat gulp-babel
Подсказка: перед использованием gulp убедитесь, что вы были установлены gulp-cli глобально на вашем компьютере.
для следующего шага создайте gulpfile.js, чтобы мы могли поместить в него нашу конфигурацию.
затем в gulpfile.js введите эти коды.
const gulp = require('gulp');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
gulp.task('default', () =>
gulp.src('src/*.pl.js')
.pipe(babel({
presets: [
"es2015",
"react"
]
}))
.pipe(concat('all.js'))
.pipe(gulp.dest('lib'))
);
эта default задача просто получает все файлы из папки src и .pl.js расширения, затем конвертирует их в ES5 с помощью gulp-babel и, наконец, объединяет их в файл all.js и помещает в папку lib.
Подсказка 1: в используемом мной расширении нет ничего особенного, вы можете изменить его на любое другое.
Совет 2: после этого вы должны создать каждый компонент с расширением, которое вы создали ранее, и заменить на него предыдущее расширение компонента. в нашем случае это .pl.js.
А теперь давайте создадим новый компонент и назовем его Header.pl.js:
import React , {Component} from 'react';
export class Header extends Component{
constructor(props) {
super(props);
}
render() {
return(
<h1>this is {this.props.text}!</h1>
)
}
}
Подсказка: вы должны использовать export компонент вместо export default, потому что все компоненты будут склеены, и мы не должны иметь несколько export default в одном файле.
после этого мы должны запустить команду gulp:
> gulp default
так что наши компоненты готовы к использованию через all.js.
последнее, что мы хотим сделать, это изменить наш главный файл проекта на all.js, поэтому откройте файл package.json и замените его.
так что мы можем использовать несколько компонентов в одном файле без каких-либо грязных
Надеюсь, вам понравится эта статья, и она сработает для вас
