我正在编写一个库，您可以使用它将React应用程序呈现为Web组件。像这样：
{ css: 'inject' }您可以看到有一个选项<link>。要使用CSS创建Web组件，我需要将ReactWebComponent.create = function(options) {
const proto = Object.create(HTMLElement.prototype, {
attachedCallback: {
value: function() {
const mountPoint = document.createElement('span');
const shadowRoot = this.createShadowRoot();
shadowRoot.appendChild(mountPoint);
shadowRoot.insertAdjacentHTML('beforeend', options.css);
ReactDOM.render(<App />, mountPoint);
}
}
});
document.registerElement('react-web-component', {prototype: proto});
};
标记添加到阴影dom中。这发生在我的图书馆内。
虚拟代码：
'inject'现在我当然不想追加字符串plugin。相反，我想编写一个Webpack loader或<link>来获取extract-text-webpack-plugin生成的CSS文件，并在'inject'处注入相应的ReactWebComponent.create(<App />, 'my-react-web-component', { css: 'inject' });
标记。所以来自
ReactWebComponent.create(<App />, 'my-react-web-component', { css: '<link rel="stylesheet" type="text/css" href="styles.a4e5f9.css">' });
我想生成这个
RegEx我认为可以使用Dir.glob('./app/{exceptions,helpers}/*.rb').each do |file|
require file
end
require './app/controllers/api_controller'
require './app/uploaders/application_uploader'
Dir.glob('./app/{uploaders,jobs,controllers,models,etls,docs}/*.rb').each do |file|
require file
end
轻松完成替换部分，但我对如何获取CSS文件名以及如何转换JS文件感到困扰。