Clever Geek Handbook

VUEコンポーネントからライブラリを作成し、NPMに公開する

画像



私は長い間Vue.jsで開発してきましたが、公開するためにコンポーネントをパックする必要はありませんでした。最近、興味深いコンポーネントのアイデアが浮かび上がり、それをコミュニティと共有することにしました。しかし、実際には、ロシアのインターネットでこのトピックに関する包括的なガイドを見つけることができませんでした。したがって、この問題を検討した後、このトピックに関する解決策を共有することにしました。

また、このコンポーネントがどのように機能するかを確認することを決定した開発者の便宜のために、デモコンポーネントのデプロイメントをgithub-pagesに添付するとよいと判断しました。

ドキュメントには、公開プロセスcli.vuejs.org/en/guide/deployment.htmlを説明するセクションがありますが、ライブラリ+デモ+ npmの構築には適していません。


インストールとプロジェクトの作成



VueCLIを使用してパッケージを作成します。これについては詳しく説明しません。ドキュメントのセクションへのリンクを追加するだけです。





重要：以下のコード例では、コンポーネントの名前はvue-input-calculatorです。変更することを忘れないでください。


プロジェクト設定



ここでpackage.jsonを追加/変更する必要があります：



詳細
homepage —

main —

version — , ,

private — false ,

scripts: «build»: «vue-cli-service build --target lib --name vue-input-calculator src/lib.js» — , . : cli.vuejs.org/ru/guide/build-targets.html

scripts: «predeploy» / «deploy» — / 



{ 
"name": "vue-input-calculator", 
"homepage": "https://lih1989.github.io/vue-input-calculator/", 
"main": "./lib/vue-input-calculator.common.js", 
"version": "0.1.0", 
"scripts": {
 "serve": "vue-cli-service serve --port 3000",
 "predeploy": "vue-cli-service build --mode demo", 
 "deploy": "gh-pages -d demo", 
 "build": "vue-cli-service build --target lib --name vue-input-calculator src/lib.js", 
 "lint": "vue-cli-service lint" 
}
…
}


vue.config.jsが作成され、必要なパラメーターが入力されます。



詳細
publicPath: github page

outputDir: production lib, demo

css.extract: css , 



module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/'
        : '/vue-input-calculator/',
    outputDir: process.env.NODE_ENV === 'production'
        ? __dirname+'/lib'
        : __dirname+'/demo',
    css: {
        extract: false
    }
};


src / lib.jsは、ライブラリ用に個別のビルドポイントを作成します 

import VueInputCalculator from './components/VueInputCalculator'
export default VueInputCalculator


.gitignore-リポジトリからデモフォルダを削除します 



/demo/
...


npmjs上でアカウントを作成します- www.npmjs.com/signupを



開発と出版



私たちは順番に実行します： 



0.  - npm run serve
1.    - npm run build
2.1.  - git commit - m "commit"
2.2.     - git push
3.    - npm run predeploy
4.   gh-pages - npm run deploy
5.    npmjs -  npm publish ( npm login)


最初の展開後、gh-pagesブランチが作成されます。githubページを表示するには、リポジトリ設定に移動してこのブランチをインストールする必要があります。

画像


結論



これで、開発および改善できるオープンソースプロジェクトができました。



この資料をお読みいただきありがとうございます。これは理想的ではなく、多くのコンポーネントを含む大規模なプロジェクトには適していませんが、公開と展開がどのように機能するかについての一般的な理解は得られます。

UPD。行った決定が正しく、すべてが正しく行われたかどうかわからないため、[チュートリアル]ボックスをオンにしませんでした。より経験豊富な同僚からのフィードバックに非常に感謝します。


「離陸」していない場合は、矛盾を見つけたり、このマニュアルを改善するための提案がある場合は、コメントまたはプライベートメッセージに書き込んでください。



サンプルプロジェクトの完全なコード



github.com/lih1989/vue-input-calculator



使用された材料：





More articles:


All Articles