es-style

2.3.0 • Public • Published

es-style · NPM version

说明

es-style是基于postcss的转译功能,同时服务于react项目,它是针对服务端渲染时的静态资源处理方案,同时也适用于单页面应用

⚠️ es-style@2.0.0+版本基于webpack4

目前服务网站喜马拉雅 FM

体验

npm install
npm run ssr

or

npm run spa

安装

npm install es-style --save

or

yarn add es-style

webpack - 开发

babel 配置

{
  "plugins": [
    "es-style/babel",
    {
      "type": "attribute", // `class` 
      "imageOptions": {
        "path": "images/", //
        "limit": 5000
      }
    }
  ]
}

开发环境需配合 express 来搭建服务,具体配置参考examples/spa/server/index.js

如果不配置的话,会导致图片资源访问不了

const { ExpressWatch } = require('es-style/watch');
const webpack = require('webpack');
const webpackConfig = require('./webpack.dev.config');
const app = express();
const compiler = ExpressWatch(webpack(webpackConfig), app, () => {
  //compiler.plugin('done',callback)
  //这里主要编写上面钩子方法的回调实现,因为watch方法中集成了done的使用,防止出现冲突
});

webpack - 发布

babel 配置

{
  "plugins": [
    "es-style/babel",
    {
      "type": "attribute", // `class` 
      "position": "external", //inlineheadexternal
      "write": true, //(cssnode,true
      "publicPath": "/", //cdn
      "fileSystem": "file", //memoryfile
      "path": "./dist", //
      "imageOptions": {
        "path": "images/", //
        "limit": 5000
      },
      "fontOptions": {
        "path": "fonts/" //
      }
    }
  ]
}

☝️ 建议

发布的时候[position]使用外联(external),开发的时候使用内联(inline)

发布的时候[fileSystem]使用文本文件(file),开发的时候使用内存文件(memory)

⚠️ ️ 注意

发布的时候,path和publicPath的配置和webpack的output里面的配置项一致

css导出到文件中的目录是根据path来的,在path根目录下,文件名称是main.css

🍡 雪碧图

如果需要雪碧图,那么在当前css文件的头部添加如下注释,则该css文件中的所有图片将集成到一张大图上

不支持svg合并,由于svg-sprite使用到PhantomJS,文件较大,去掉了

如果需要,可以在项目中自行开发 🙂
/*sprite*/

💀 报错处理

如果是在启动服务时报错,这个时候修改好错误是没有办法继续运行服务,需要同时保存下引用该样式的js文件,这很重要,否则需要重启服务,浪费时间

如果服务以及运行,这个时候报错,只需修改错误,服务即可自动实现热更新

项目引用

//组件内生效 改变即触发热更新
import './style/es-style.scss';
 
//全局生效(!) 改变需刷新浏览器才能看到变化
import './style/common.scss!';
 
//可以使用<es-style/>来定位css的存放位置
export default () => (
  <div>
    <es-style />
  </div>
);
//如果没有es-style标签,那么会按JSXElement从上往下按就近原则存放css的资源组件
//指定es-style标签,就是指定当前js引用的样式资源存放的位置,这里的存放不是<style>这种形式,而是将解析后的样式已props形式进行存放

配置文件 .es-style

在项目根目录创建.es-style文件,配置内容如下

plugins 表示postcss插件,⚠️ 下面两个插件暂时不要使用 cssnanopostcss-modules

因为 es-style 已经实现这样的功能,还有雪碧图已经内置了postcss-spritesautoprefixer插件,可用对其进行参数配置

如果有报错,请 ISSUE

{
  "plugins": [
    [
      "postcss-sprites",
      {
        "spritePath": ".es-sprites"
      }
    ],
    [
      "autoprefixer",
      {
        "browsers": "last 4 version"
      }
    ],
    ["postcss-plugin-px2rem", {}]
  ],
  "limit": 50 // <=50 base64
}

注意

  1. 引用scss需保证当前引用的 js 文件内存在JSXElement,否则会解析不到

  2. 目前对于全局的scss无法做到去重,因为 babel 解析是根据一个个文件做的,所以尽量只引用一份全局的样式文件

  3. 开发环境不推荐使用happypack插件来编译,会导致图片资源丢失,由于使用的是内存文件系统,使用它会导致在每个打开的线程中创建文件,产生不可控的影响

  4. .gitignore添加上面配置文件的.es-sprites,忽略雪碧图生成的图片,默认是.es-sprites

  5. 配置文件.es-style中的 plugin,执行顺序从上往下,重复的 plugin 会被忽略,一直执行到最后

License

MIT

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.3.0
    2
    • latest

Version History

Package Sidebar

Install

npm i es-style

Weekly Downloads

2

Version

2.3.0

License

MIT

Unpacked Size

130 kB

Total Files

29

Last publish

Collaborators

  • topthinking