@xinghe/roadhog

    1.0.8 • Public • Published

    roadhog

    based on roadhog v1.1.1,add cssModulesInclude configuration to load less into css-module from node_modules
    基于 roadhog v1.1.1,添加了cssModulesInclude属性以css-module方式加载node_modules目录下的依赖

    更多配置及使用信息请参考原文roadhog v1.1.1
    For more information please check the original

    配置

    cssModulesInclude 添加配置加载node_modules目录下的less文件为CssModule的方式

    {
      "entry": "src/index.js",
      "disableCSSModules": false,
      "cssModulesExclude": [],
      "cssModulesInclude": [],
      "publicPath": "/",
      "outputPath": "./dist",
      "extraBabelPlugins": [],
      "extraPostCSSPlugins": [],
      "sass": false,
      "hash": false,
      "autoprefixer": null,
      "proxy": null,
      "externals": null,
      "library": null,
      "libraryTarget": "var",
      "multipage": false,
      "define": null,
      "env": null,
      "theme": null,
    }

    查看更多配置相关问题和改进

    entry

    指定 webpack 入口文件,支持 glob 格式。

    如果你的项目是多页类型,会希望把 src/pages 的文件作为入口。可以这样配:

    "entry": "src/pages/*.js"
    

    disableCSSModules

    禁用 CSS Modules。最好别关,熟悉并使用他后,你会发现写样式简单了很多。

    cssModulesExclude

    支持 CSSModules 混用,通过 cssModulesExclude 可指定不需要走 CSSModules 的文件列表。

    "cssModulesExclude": [
      './src/a.css',
      './src/b.less',
    ]
    

    cssModulesInclude

    通过 cssModulesInclude 指定less需要使用module方式的依赖包名称。

    "cssModulesInclude": [
      'bizcomponent'
    ]
    

    hash

    使用 hash 文件名。

    "hash": true
    

    publicPath

    配置生产环境的 publicPath,开发环境下永远为 /

    outputPath

    配置输出路径,默认是 ./dist

    extraBabelPlugins

    配置额外的 babel plugin。babel plugin 只能添加,不允许覆盖和删除。

    比如,同时使用 antd, dva 时,通常需要这么配:

    "extraBabelPlugins": [
      "transform-runtime",
      "dva-hmr",
      ["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css" }]
    ]
    

    同时安装相关依赖:

    $ npm i babel-plugin-transform-runtime babel-plugin-import babel-plugin-dva-hmr --save-dev
    $ npm i babel-runtime --save

    注意:这么配还有个问题,dva-hmr 是开发环境的插件,如果 build 时也用上就会打出冗余代码。解决方案详见 #env

    extraPostCSSPlugins

    配置额外的 postcss 插件。

    注意:由于 postcss 的插件是以函数的方式进行配置的,所以这个配置只能在 .roadhogrc.js 里使用。

    比如:

    extraPostCSSPlugins: [
      pxtorem({
        rootValue: 100,
        propWhiteList: [],
      }),
    ],
    

    autoprefixer

    配置 autoprefixer 参数,详见 autoprefixerbrowserslist

    比如,如果是做移动端的开发,可以配成:

    "autoprefixer": {
      "browsers": [
        "iOS >= 8", "Android >= 4"
      ]
    }
    

    sass

    支持 sass,值为 node-sass 的配置参数。

    注意:开启 sass 支持需在项目代码中安装 node-sass 和 sass-loader 两个依赖。

    proxy

    配置代理,详见 webpack-dev-server#proxy

    如果要代理请求到其他服务器,可以这样配:

    "proxy": {
      "/api": {
        "target": "http://jsonplaceholder.typicode.com/",
        "changeOrigin": true,
        "pathRewrite": { "^/api" : "" }
      }
    }
    

    然后访问 /api/users 就能访问到 http://jsonplaceholder.typicode.com/users 的数据。

    如果要做数据 mock,可以考虑和 json-server 结合使用,把 /api 代理到 json-server 启动的端口。

    externals

    配置 webpack 的 externals 属性。

    library

    配置 webpack 的 library 属性。

    libraryTarget

    配置 webpack 的 libraryTarget 属性。

    multipage

    配置是否多页应用。多页应用会自动提取公共部分为 common.js 和 common.css 。

    define

    配置 webpack 的 DefinePlugin 插件,define 的值会自动做 JSON.stringify 处理。

    env

    针对特定的环境进行配置。server 的环境变量是 development,build 的环境变量是 production

    比如:

    "extraBabelPlugins": ["transform-runtime"],
    "env": {
      "development": {
        "extraBabelPlugins": ["dva-hmr"]
      }
    }
    

    这样,开发环境下的 extraBabelPlugins 是 ["transform-runtime", "dva-hmr"],而生产环境下是 ["transform-runtime"]

    theme

    配置主题,实际上是配 less 的 modifyVars。支持 Object 和文件路径两种方式的配置。

    比如:

    "theme": {
      "@primary-color": "#1DA57A"
    }
    

    或者,

    "theme": "./node_modules/abc/theme-config.js"
    

    这里有 如何配置 antd theme 的例子

    svgSpriteLoaderDirs

    Notice:

    • roadhog 版本必须 >= 0.6.0-beta1
    • 因为 .roadhogrc 配置文件优先级大于 .roadhogrc.js, 请先删除 .roadhogrc

    配置一个路径数组, 该路径下的 svg 文件会全部交给 svg-sprite-loader 处理

    比如,使用 antd-mobile@1 的 自定义 svg icon 功能的用户,可以在 .roadhogrc.js 文件中做如下配置

    const path = require('path');
    const svgSpriteDirs = [
      require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 内置svg
      path.resolve(__dirname, 'src/my-project-svg-foler'),  // 业务代码本地私有 svg 存放目录
    ];
     
    export default {
      // ...
      svgSpriteLoaderDirs: svgSpriteDirs,
      //...
    }
     

    环境变量

    可环境变量临时配置一些参数,包括:

    • PORT, 端口号,默认 8000
    • HOST, 默认 localhost
    • HTTPS,是否开启 https,默认关闭
    • BROWSER,设为 none 时不自动打开浏览器
    • CLEAR_CONSOLE,设为 none 时清屏

    比如,使用 3000 端口开启服务器可以这样:

    # OS X, Linux 
    $ PORT=3000 roadhog server
     
    # Windows (cmd.exe) 
    set PORT=3000&&roadhog server
     
    # Or use cross-env for all platforms 
    $ cross-env PORT=3000 roadhog server

    .babelrc

    {
        "presets": [
            "es2015",
            "stage-0"
        ],
        "plugins": [
            "add-module-exports"
        ]
    }

    LICENSE

    MIT

    Install

    npm i @xinghe/roadhog

    DownloadsWeekly Downloads

    0

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    51

    Last publish

    Collaborators

    • xinghe