Cách xuất bản thư viện thành phần Vue.js?

Question

Tôi đang làm việc trên một dự án có chứa một mô-đun Vuex và một thành phần trừu tượng mà người dùng có thể mở rộng.

Tôi rất muốn xuất bản điều này trên NPM để dọn sạch mã nguồn của tôi và kéo nó ra khỏi dự án của tôi như một mô-đun được thử nghiệm tốt. Tôi đã xác định các tập tin chính trong package.json để nạp một chỉ số mà nhập khẩu tất cả mọi thứ tôi muốn để lộ:

https://github.com/stephan-v/vue-search-filters/

Chỉ số chứa này vào lúc này:

import AbstractFilter from './src/components/filters/abstract/AbstractFilter.vue'; 
import Search from './src/store/modules/search'; 

module.exports = { 
    AbstractFilter, 
    Search 
}; 

Để làm việc này tôi cần để transpile này kể từ khi một trình biên dịch babel thường sẽ không transpile các tập tin được nhập khẩu từ node_modules (đúng tôi nếu tôi sai ở đây). Bên cạnh đó tôi có lẽ sẽ là một ý tưởng tốt để làm điều này để nó có thể được sử dụng bởi các hệ thống khác nhau.

Làm cách nào để chỉ transpile các tệp mà tôi cần bằng Webpack? Tôi có phải tạo một cấu hình riêng cho việc này không?

Cấu hình trông như thế nào? Tôi biết các vue-cli có một lệnh build cho một thành phần tập tin duy nhất nhưng điều này là một chút khác nhau.

Bất kỳ mẹo hoặc đề xuất nào về cách chuyển tải một cái gì đó như thế này đều được chào đón.

Sửa

Điều này có vẻ giống như một sự khởi đầu tốt cũng như:

https://github.com/Akryum/vue-share-components

Điều nhập khẩu nhất cho người dùng Webpack cần ghi nhận là bạn cần phải transpile tập tin của bạn trong UMD mà có thể được đặt bởi:

libraryTarget: 'umd' 

Điều này sẽ đảm bảo bạn đang chuyển đổi cho Universal Module Definition, có nghĩa là mã của bạn sẽ làm việc trong các môi trường khác nhau như AMD, CommonJS, như một thẻ script đơn giản vv

Bên cạnh đó nó là nhập khẩu để cung cấp các externals trong webpack:

externals: {} 

đây bạn có thể xác định thư viện người dùng dự án của bạn nhưng không nên được tích hợp vào tệp dist của bạn. Ví dụ bạn không muốn thư viện Vue được biên dịch/chuyển thành nguồn của gói NPM của bạn.

Tôi sẽ nghiên cứu thêm một chút, cho đến nay các tùy chọn tốt nhất có vẻ như tự tạo dự án tùy chỉnh Nếu tôi muốn kiểm tra tính linh hoạt và đơn vị.

docs Webpack

Đây cũng là một trang hữu ích mà đi sâu về làm thế nào để xuất bản một cái gì đó với Webpack:

https://webpack.js.org/guides/author-libraries/#add-librarytarget

Answer 1

Cách tốt nhất có thể là xây dựng mô-đun và đặt main trong package.json thành my_dist/my_index.js. Nếu không, mọi dự án sẽ sử dụng mô-đun của bạn sẽ phải thêm nó vào include là tẻ nhạt.

Bạn cũng sẽ muốn gói webpack của mình được xây dựng để tuân thủ UMD (Định nghĩa mô đun chung). Cho rằng bạn phải thiết lập libraryTarget để umd:

... 
output: { 
    filename: 'index.js', 
    library:'my_lib_name', 
    libraryTarget: 'umd' 
}, 
... 

Cũng là một điều tốt sẽ được thêm Vue để externals để bạn không đóng gói thêm 200KB của thư viện vue.

externals: { 
    vue: 'vue' 
}, 
resolve: { 
    alias: { 
    'vue$': 'vue/dist/vue.esm.js' 
    } 
} 

Và thêm nó vào peerDependencies trong package.json:

... 
"peerDependencies": { 
    "vue": "^2.0.0" 
}, 
"devDependencies": { 
    "vue": "^2.0.0" 
} 
... 

Nếu bạn cần một ví dụ hiện như thế nào để đóng gói một phần vue.js, bạn có thể có một cái nhìn tại một trong những module tôi duy trì :

https://github.com/euvl/vue-js-popover

Riêng webpack.config.js và package.json sẽ rất thú vị cho bạn.

Answer 2

Tôi đang tìm kiếm một giải pháp tương tự và thấy rollup https://github.com/thgh/rollup-plugin-vue2 (nhưng không thể làm cho nó hoạt động) và thành phần này https://github.com/leftstick/vue-expand-ball nơi tất cả mã thành phần được biên dịch thành một tệp js có thể tái sử dụng. Tôi biết đó không phải là giải pháp phù hợp nhưng có thể nó đủ cho nhu cầu của bạn.