Я рекомендую, прежде чем приступить к чтению блога, прочитать Понимание NPM, чтобы лучше понять, что такое NPM.
Наша цель — разработать настраиваемый компонент notebook page и опубликовать его в npm. Теперь приступим.
Шаг 1: Инициализация нашего проекта
Мы начнем с перехода к нашему каталогу, а затем инициализируем его с помощью приведенной ниже команды.
npm init
После нажатия Enter нас попросят ответить на некоторые вопросы, связанные с нашим проектом, которые при необходимости можно отредактировать позже.
Как только мы закончим, мы сможем увидеть сгенерированный package.json в нашем каталоге.
Шаг 2: Добавление зависимостей
Теперь мы добавим следующие зависимости к нашему package.json, а затем используем команду npm i для их установки, и будет создана папка node_modules. Не забудьте добавить node_modules в gitignore и npmignore.
"peerDependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"webpack": "^4.5.0"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.5.1",
"style-loader": "^1.1.3",
"webpack-cli": "^3.2.1"
}
Кроме того, вы можете установить все пакеты из CLI с помощью
npm i <package> <package> . . . <package>. Если вас смущают peerDependencies, это особые типы зависимостей, которые возникнут только в том случае, если вы опубликуете свой собственный пакет.
Шаг 3: Добавление файлов и папок
Мы создадим две папки: src, где будет находиться наш компонент React, и lib, где наш файл javascript появится после компиляции. После этого мы создадим два файла .babelrc и webpack.config.js, которые мы настроим и обсудим позже в этом блоге. Теперь наш каталог должен выглядеть так.
Шаг 4: Создание нашего компонента
Следующим шагом будет создание index.js и style.css в нашей папке src. Файлы следующие.
Шаг 5: Настройка webpack.config.js
В webpack.config.js мы добавим следующие коды. Режим, вход, выход, модуль, разрешение и внешние параметры будут настроены.
const path = require("path");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve("lib"),
filename: "index.js",
libraryTarget: "commonjs2",
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
use: "babel-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
resolve: {
alias: {
react: path.resolve(__dirname, "./node_modules/react"),
"react-dom": path.resolve(__dirname, "./node_modules/react-dom"),
},
},
externals: {
react: {
commonjs: "react",
commonjs2: "react",
amd: "React",
root: "React",
},
"react-dom": {
commonjs: "react-dom",
commonjs2: "react-dom",
amd: "ReactDOM",
root: "ReactDOM",
},
},
};
Ниже приводится краткое описание некоторых ключевых слов файла; однако, если вы хотите узнать больше, ознакомьтесь с конфигурацией веб-пакета, и я также скоро напишу блог на эту тему.
mode: это указывает Webpack использовать встроенную оптимизацию соответствующим образом.
entry: путь, по которому запускается приложение и начинается сборка webpack.
output: описывает, как веб-пакет выдает результаты.
Шаг 6: Настройка .babelrc
.babelrc будет обновлен следующим кодом.
{
"presets": [
"react",
"env",
"stage-0"
]
}
Мы используем Babel для преобразования JSX в javascript, поэтому мы используем пакеты, которые собираемся добавить в пресеты.
Шаг 7: Редактирование package.json
Давайте добавим следующие сценарии в package.json вместо test, так как мы еще не добавили никаких сценариев. .
"scripts": {
"start": "webpack --watch",
"build": "webpack"
},
Кроме того, мы изменим наш main с index.js на ./lib/index.js.
Шаг 8. Тестирование нашего пакета
После того, как мы выполнили все остальные шаги, мы запустим следующую команду для сборки нашего пакета.
npm run build
Следуя процессу сборки, мы выполним следующую команду для создания файла .tgz, который для нас react-notebook-page-1.0.0.tgz.
npm pack
Мы можем установить и протестировать компонент из любого проекта на нашем локальном компьютере, используя следующую команду.
npm install <path/to/x-x-x-x.tgz>
Вы сможете использовать свой компонент, если выполнили все предыдущие шаги. Если нет, перепроверьте шаги или оставьте комментарий, чтобы я мог вам помочь.
Шаг 9: Публикация нашего компонента
Мы всего в шаге от публикации нашего компонента. Во-первых, войдите в систему с нашего терминала.
Если вы не знаете, как это сделать, загляните в мой блог Understanding NPM.
После входа выполните следующую команду.
npm publish
Большое ура! Наш пакет был успешно опубликован.
Всякий раз, когда вы публикуете свой пакет, убедитесь, что вы включили хороший README, чтобы разработчик, который будет его устанавливать, имел четкое представление о том, как его использовать.
Большое спасибо за чтение! Скоро я опубликую другие темы, которые могут быть вам интересны. Пожалуйста, не стесняйтесь комментировать ниже или связаться со мной, если вы считаете, что я должен добавить, исправить или удалить что-либо из этой статьи.
