創建私人反應庫

Question

我有一些爲React（ES6）應用程序製作的組件，現在我想與其他一些應用程序共享這些組件。

我應該如何爲此設置一個存儲庫？

• webpack.config.js應該是什麼樣子？
• 如何包含SASS？
• 如何在我的dist版本中包含node_module文件？或者也許只是將es6翻譯成es5（SCSS inports會發生什麼情況）？

Answer 1

做到這一點的方法是使用通常的Webpack構建過程。你建立你的項目，它的輸出將是一個JS包和一個CSS包（你的SASS變成了CSS）。然後從消費應用程序中消耗庫的資源，即JS和CSS。

這裏最重要的是要確保在你的webpack.config.js文件中設置輸出類型library：

... 
output: { 
    path: __dirname, 
    filename: "dist/mylib.js", 
    library: ["MyLibrary", "mylib"], 
    libraryTarget: "umd" 
}, 
... 

然後在消費應用程序，你可以從它

引用的JS文件和導入組件

import {MyComponent} from './mylib'; 

至於CSS，只是<link>您的網頁中的CSS文件通常的方式。