1. Введение
Раньше я всегда npm устанавливал чужие пакеты и использовал чужие плагины.Только недавно было интервью.Интервьюер спросил,ты сам написал плагин? Нет, сегодня я провел полдня, занимаясь этим~
Здесь я написал компонент для всплывающего окна диалога.Ну, так как раньше я пользовался другими фреймворками, диалог Modal не всегда можно было изменить на то, что я хотел, поэтому я написал его сам, и вдруг я подумал, а почему бы не сделать npm package Ну, без лишних слов, приступим
Вот мой собственный пакет npm, разработанный на основе vue.Он может быть очень хорошо написан, но я очень его узнаю (да) действительно (люблю)
Рекомендуется посмотреть мой код на гитхабе, и вы не запутаетесь, когда будете соответствовать ему.
-
Адрес на гитхабе:p-dialog-modal
-
адрес нпм:p-dialog-modal
2. Шаги
Один: напишите наш код Vue как обычно
2: Опубликовать в npm
2.1 Создайте новую пустую папку
mkdir npm // 这里文件夹名为 npm
2.2 Инициализация проекта
Перейдите в папку npm и инициализируйте проект. Затем вам будет предложено заполнить некоторую информацию, связанную с проектом, просто следуйте инструкциям. Нечего сказать. Обратите внимание, что имя не должно совпадать с именем других существующих пакетов npm, иначе через некоторое время не удастся отправить пакеты Npm.Вы можете перейти на npmjs.com, чтобы найти такое же имя.
npm init
2.3 package.json
Так как это пакет компонентов vue и использует es6 и webpack, то в поле devDependencies нужно добавить как минимум следующие зависимости.Ниже мой package.json, соответствующие поля, проверьте сами
{
"name": "p-dialog-modal",
"version": "1.0.3",
"description": "弹窗组件，自己的第一个npm包，有些粗略和简单",
"main": "dist/pdkModal.min.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot --inline",
"build": "webpack --display-error-details --config webpack.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/PDKSophia/p-dialog-modal.git"
},
"author": "PDK",
"license": "ISC",
"bugs": {
"url": "https://github.com/PDKSophia/p-dialog-modal/issues"
},
"homepage": "https://github.com/PDKSophia/p-dialog-modal#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"es6-promise": "^4.1.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue": "^2.5.9",
"vue-hot-reload-api": "^2.2.4",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.5.0",
"vue-router": "^3.0.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.9",
"vuex": "^3.0.1",
"webpack": "^3.9.1",
"webpack-dev-server": "^2.9.5"
}
}
2.4 Выполнение пакета зависимостей загрузки
npm install
2.5 Создайте новые папки src и dist
dist обозначает каталог выпуска, а src — каталог разработки. JS в dist — это файл, упакованный webpack на тот момент. Позже на официальный сайт npm будет отправлен только каталог dist, а src отправлен не будет.
В папке src пишем app.vue
<!-- app.vue -->
<template>
<div>
<p>我是{{ user.name }}</p>
<p>我来自{{ user.from }}</p>
</div>
</template>
<script>
export default {
data () {
return {}
},
props: {
user: {
type: Object
}
}
}
</script>
<style scoped lang='less'>
</style>
В папке src пишем index.js, цель — экспортировать приложение
// index.js
import NpmVue from './app.vue'
export default NpmVue
2.6 Добавьте конфигурацию упаковки webpack и упакуйте содержимое src в каталог dist.
Добавьте файл webpack.config.js в корневой каталог.
const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");
module.exports = {
devtool: 'source-map',
entry: "./src/index.js",//入口文件，就是上步骤的src目录下的index.js文件，
output: {
path: path.resolve(__dirname, './dist'),//输出路径，就是上步骤中新建的dist目录，
publicPath: '/dist/',
filename: 'pdkModal.min.js', // 输出文件，对应package.json中的main字段
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader" }
]
},
{
test: /\.js$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel-loader'
},
{
test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
loader: 'url-loader',
query: {
limit: 30000,
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
]
};
2.7 Упаковка
Выполните npm run build, и pdkModal.min.js будет сгенерирован в каталоге dist, который является основным файлом нашего пакета npm.
Обратите внимание, что здесь необходимо изменить информацию об основном файле, на которую указывает основное поле в package.json.
npm run build
Измените основное поле в package.json
{
...
"main": "dist/pdkModal.min.js" // 换成你的
}
2.8 Игнорировать файлы для загрузки
Создайте новый файл с именем .npmignore, который представляет собой файл и папку, которые не нужно публиковать в npm.Правила такие же, как и для .gitignore. Если в вашем проекте есть .gitignore, но нет .npmignore, будет использоваться конфигурация в .gitignore.
.*
*.md
*.yml
build/
node_modules/
src/
test/
2.9 Выпуск
Сначала перейдите в NPM, чтобы зарегистрировать учетную запись (должен выполнить проверку электронной почты), затем введите корневой каталог и запустить NPM Login
Это позволит вам ввести имя пользователя, пароль и почтовый ящик, если вход в систему будет успешным, он покажет:
Logged in as 你的名字 on https://registry.npmjs.org/.
Затем выполните npm publish для публикации на официальном сайте npm.
Когда ваш пакет необходимо обновить, вам нужно вручную изменить номер версии в package.json.Соглашение +1, например 1.0.0 -> 1.0.1. Затем войдите в npm, опубликуйте npm. Вот и все.
Если вы обнаружите, что вход в npm завершается с ошибкой и сообщается об ошибке 409, вы можете рассмотреть возможность перехода на исходный код Taobao.
npm login --registry http://registry.npmjs.org
npm publish --registry http://registry.npmjs.org
Связь
Это пакет, который я написал сам:GitHub.com/P ДК София/Боюсь…
личный блог:GitHub.com/PDK София/Нет…