javascript - 创建纯 css javascript 库/包的最佳实践是什么

Question

我想创建一个可以是 npm installed 的库进入十几个 javascript 元素之一(有些是 ES6 元素，但许多是更老的 ES5 元素)。库元素还有一些非常常用的 javascript 方法/类/组件/等。

(顺便说一句，该库元素包括一些用 ES6 编写的常用方法和实用程序，但使用 webpack+babel 进行了转译，也可以在 ES5 和 ES6 元素中使用。意思是:我在 webpack.config 中的输入文件是 module.exports 的文件；我的输出是单个构建文件。)

主要问题:

在 ES6 上的实现，例如一个 React 元素，我不确定如何 import 'nodeModuleName/someSimpleCssFile'这将允许 webpack/babel(在实现方面)做这件事。特别是在一个元素中，唯一从该元素导入的是一个全局样式表。

在旧元素的实现中，开发人员需要能够使用 <link />标记以拉入一个样式表。

我知道我可以简单地将所有 css 文件放在 main 中指定的文件夹中package.json 的属性，但这是最好的方法吗？看起来，如果造型师添加了 background: url('some/path/to/image.png');，向前看使用 babel 转译器会将所有这些东西拉到单个构建文件中。

这种情况下的问题是，我如何 import只有一个 css 文件被转换成一个构建文件？或者，更确切地说，我什至如何在我的主 module.exports 中包含单个 css 文件？导出以便我可以以某种方式仅将该 css 文件导入 ES6/ES2015 元素？

Answer 1

实现此目的的一种方法可能是将 CSS 样式信息存储在库中的对象中，并动态创建和填充 <style>页面加载时标记。

/* example */
var someStyles = {
    body: {
        color: '#fff',
        'background-color': '#000',
        'font-family': 'sans-serif',
        margin: '33px'
    },
    'h1, h2, h3, h4': {
        'font-weight': 'normal'
    },
    ID_box: {
        width: '100%',
        height: 'auto',
        color: '#000',
        'background-color': '#fff'
    },
    CLASS_cell: {
        border: '1px solid #999',
        padding: '5px 10px'
    }
};

var sTag = document.createElement('style');
var css = '';

sTag.type = 'text/css';
sTag.scoped = 'true';

Object.keys(someStyles).forEach(function(s) {
    var rules = someStyles[s];

    css += s.replace(/ID_/g, '#').replace(/CLASS_/g, '.') + ' {\n';

    Object.keys(rules).forEach(function(r) {
        css += '  '+ r + ': ' + rules[r] + ';\n';
    });

    css += '}\n';
});


sTag.textContent = css;

document.body.insertBefore(sTag, document.body.firstChild);

只是一个想法:)