Have ideas to improve npm?Join in the discussion! »

    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

    Keywords

    none

    Install

    npm i es-style

    DownloadsWeekly Downloads

    13

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    130 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar