创建私有React库

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>页面中的require 'nokogiri' doc = Nokogiri::HTML(<<EOT) <ol> <li><b>The Company Name</b><br> The Street<br> The City, The State The Zipcode<br><br> </li> <li><b>The Company Name</b><br> The Street<br> The City, The State The Zipcode<br><br> </li> </ol> EOT doc.search('li').map{ |li| text = li.text.split("\n").map(&:strip) } # => [["The Company Name", # "The Street", # "The City,", # "The State", # "The Zipcode"], # ["The Company Name", # "The Street", # "The City,", # "The State", # "The Zipcode"]] CSS文件。