Как создать и опубликовать компонент Vuejs в NPM
Я начал много работать с vue и начал использовать его во всех проектах в компании, где я работаю. И с этим я закончил тем, что создал components, в общем autocompleteЯ знаю, что есть много, я уже использовал некоторые, но ни один не удовлетворял все мои потребности. Однако, когда бы я ни работал над новым проектом и использовал тот же компонент, я либо воссоздаю его, либо копирую и вставляю.
Поэтому я сомневаюсь, как создать свой компонент, загружать его в npmjs всякий раз, когда я его использую, просто npm install -save ..., а также иметь возможность внести свой вклад в сообщество.
1 ответ
Вот один из способов, которым вы можете создать / опубликовать библиотеку / компонент Vuejs с нуля.
Поскольку я собираюсь записать каждый шаг и команду, обязательно следуйте всему руководству, и вы сможете создавать и публиковать свой собственный компонент Vuejs в NPM.
После публикации, как и большинство библиотек, вы можете установить его, используя ex:
npm install --save your-component
А затем импортируйте компонент внутри вашего приложения, используя
import something from 'your-component'
Чтобы начать создавать наш первый компонент, сначала создайте папку с именем vuejs-hello-app (или любое другое имя) и внутри него запустите:
npm init
Просто нажмите Enter, пока интерактивный вопрос не закончится, и тогда npm сгенерирует файл с именем package.json в этой папке, содержащей следующий код.
(Примечание: я изменил описание и версию с
1.0.0в0.1.0вот результат.)
{
"name": "vuejs-hello-app",
"version": "0.1.0",
"description": "vuejs library demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
После этого нам нужно установить зависимости для нашей библиотеки.
Эти зависимости делятся на два типа: dependency а также devDependency
dependency:
это внешняя библиотека или библиотеки, на которых работает наш собственный компонент. Когда кто-то устанавливает ваш компонент, npm убедится, что эта зависимость существует или будет установлена первой. Поскольку мы создаем компонент для vue, нам нужно убедиться, что vue требуется. Итак, установите его используя:
npm install --save vue
devDependency:
это набор библиотек, которые нам нужны только для целей разработки. Эти библиотеки помогут построить и / или перенести.
Мы устанавливаем зависимости dev, используя метод выше, но добавляем суффикс -dev в --save
Теперь давайте установим минимальные зависимости dev, необходимые для нашего компонента:
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env
npm install --save-dev cross-env
npm install --save-dev css-loader
npm install --save-dev file-loader
npm install --save-dev node-sass
npm install --save-dev sass-loader
npm install --save-dev vue-loader
npm install --save-dev vue-template-compiler
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
На этом этапе библиотеки будут установлены и package.json будет обновлен, чтобы выглядеть следующим образом.
{
"name": "vuejs-hello-app",
"version": "0.1.0",
"description": "vuejs library demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"cross-env": "^5.1.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"vue-loader": "^13.5.0",
"vue-template-compiler": "^2.5.9",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"vue": "^2.5.9"
}
}
(примечание: я добавил
"build": "webpack -p"построить нашу библиотеку с веб-пакетом)
Теперь, поскольку наш код должен быть собран и перенесен, нам нужна папка для хранения версии сборки. Давайте создадим папку в нашей корневой папке и назовем ее: dist а там же файл конфигурации для вебпака и назовите его webpack.config.js
Все файлы, которые мы создали, предназначены для настройки и прочего. Для реального приложения, которое собираются использовать люди, нам нужно создать как минимум два файла внутри нашего src/ каталог.
main.js а также VuejsHelloApp.vue поставить их как: ./src/main.js а также ./src/components/VuejsHelloApp.vue
Я так структурировал мою.
dist
node_modules
src
main.js
components
VuejsHelloApp.vue
.babelrc
.eslintignore
.gitignore
.npmignore
.travis.yml
CONTRIBUTING
LICENSE
package.json
README.md
webpack.config.js
Я просто просмотрю перечисленные файлы и опишу, что делает каждый файл, если кому-то интересно:
/dist где будет храниться сборочная (перенесенная), минимизированная, не ES6-версия вашего кода
node_modules Я думаю, что мы уже знаем это, давайте проигнорируем это
src/ это корневой каталог вашей библиотеки.
.babelrc где хранятся ваши настройки Babel, так что добавьте это, чтобы отключить пресеты в модулях
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
.eslintignore Вот где вы говорите ESLINT игнорировать линтинг, поэтому поместите его внутрь:
build/*.js
.gitignore добавить файлы, которые вы хотите игнорировать (из git)
.npmignore так же, как.gitignore для NPM
.travis.yml если вам нужен CI, проверьте примеры из travis и настройте их
CONTRIBUTING не требуется
LICENSE не требуется
package.json пока игнорируй
README.md не требуется
webpack.config.js Это важный файл, который позволяет вам создавать версию кода, совместимую с браузером.
Итак, согласно нашему приложению, вот минимальный пример того, как это должно выглядеть:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
module: {
rules: [
// use babel-loader for js files
{ test: /\.js$/, use: 'babel-loader' },
// use vue-loader for .vue files
{ test: /\.vue$/, use: 'vue-loader' }
]
},
// default for pretty much every project
context: __dirname,
// specify your entry/main file
output: {
// specify your output directory...
path: path.resolve(__dirname, './dist'),
// and filename
filename: 'vuejs-hello-app.js'
}
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Обратите внимание, что важные директивы здесь entry а также output, Вы можете проверить документы webpack, чтобы узнать больше, если вы хотите полностью настроить свое приложение.
Но в основном мы говорим веб-пакет, чтобы получить ./src/main.js (наше приложение) и выведите его как ./dist/vuejs-hello-app.js
Теперь мы почти закончили настройку всего, кроме самого приложения.
Идти к /src/components/VuejsHelloApp.vue и сбросить это простое приложение, которое будет перемещать кнопку вправо или влево при наведении на него
<template>
<div>
<button @mouseover='move($event)'> I'm alive </button>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {
move (event) {
let pos = event.target.style.float;
if(pos === 'left'){
event.target.style.float = 'right'
}else{
event.target.style.float = 'left'
}
}
}
}
</script>
<style scoped>
</style>
И не в последнюю очередь ./src/main.js и экспортируйте ваше приложение как:
import VuejsHelloApp from './components/VuejsHelloApp.vue'
export default VuejsHelloApp
Теперь иди в свой package.json файл заменить "main: "index.js", с "main": "src/main.js",
После этого просто запустите эти команды для создания и публикации вашего приложения:
npm run build
git add .
git commit -m "initial commit"
git push -u origin master
npm login
npm publish
Импорт и использование библиотеки.
Если все прошло гладко, просто установите приложение следующим образом:
npm install --save vuejs-hello-app
И использовать его в Vue, как это:
<template>
<div>
<VuejsHelloApp> </VuejsHelloApp>
</div>
</template>
<script>
import VuejsHelloApp from 'vuejs-hello-app'
export default {
name: 'HelloWorld',
components: { VuejsHelloApp }
}
</script>
Я сделал это приложение https://github.com/samayo/vuejs-hello-app во время написания ответа, это может помочь лучше понять код