使用rollup打包 vue檔案到npm私庫

2021-09-29 15:59:58 字數 811 閱讀 6265

(1) 在新建的資料夾my-com中執行以下命令

npm init

npm i rollup

npm i rollup-plugin-commonjs

npm i rollup-plugin-vue

npm i vue-template-compiler

要特別關注vue-template-compiler的版本,如果發布後使用這個元件時npm install 報錯,可能就是版本需要公升級了

(2).在資料夾my-com中建rollup.config.js、index.js 、lib檔案

rollup.config.js中配置入口出口檔案

input: './index.js',

output: ,

(3).package.json配置

"main": "lib/index.js",

"scripts": ,

執行 npm run prod,會自動生成乙個lib資料夾,裡面是打包後的index.js檔案,在其他專案通過node_modules引用這個元件時候,使用的就是lib下面的壓縮js

(4).將.vue元件發布到私庫

登入私庫後執行 npm publish

在其他專案裡修改這個元件的方法:

通過修改專案裡引node_modules中元件的路徑,預設是node_modules/my-com/lib/index.js,可以修改為node_modules/my-com/index.js就可以修改元件及時在專案中更新了

webpack打包 vue檔案

在webpack中配置.vue元件頁面的解析 vue loader 1 執行npm i vue s將vue安裝為執行依賴 2 運cnpm i vue loader vue template compiler d將解析轉換vue的包安裝為開發依賴 3 執行npm i style loader css ...

webpack 打包檔案 vue 過大

在 build webpack.base.conf.js 檔案裡加上 externals 不需要打包的檔案就放寫在這裡,然後在 index.html 外連上這些庫 順便記錄乙個連線後面加入版本號 在 webpack.prod.conf.js 檔案裡 自己獲取乙個時間加在後面就可以了 官方 impor...

vue使用npm run build命令打包

在本地除錯的時候只要命令列執行npm run dev就可以把這個專案跑起來,但是現在我們要把他放到伺服器上的話需要npm run build命令 1.win r 輸入 cmd 2.進入專案檔案 如 d盤 下的 vue demo 如下操作 d 進入d盤 cd vue demo 進入資料夾 執行npm ...