The roadhog's discuss from sorrycc

如何使用postcss-pxtorem

用之前的方案是可以设置:
webpackConfig.postcss.push(pxtorem({
rootValue: 100,
propWhiteList: [],
}));
现在用roadhog怎么配置?

新增 outputPath 配置，同时支持 roadhog build -o，后者优先

roadhog build --analyze

https://github.com/chrisbateman/webpack-visualizer

新增 theme 配置

https://github.com/ant-tool/atool-build/blob/9baca94/src/getWebpackCommonConfig.js#L24-L35

支持 roadhog server 和 roadhog build 通过 -c, --config 指定配置文件

babel-plugin-react-require

pure function component 时不用手动 import react, https://github.com/vslinko/babel-plugin-react-require

类似 dora-plugin-proxy 的 mock 方案，但不包含代理

https://github.com/dora-js/dora-plugin-proxy#规则定义

判断 node 版本，要求 6.2+，不符合要求的出错并退出

.roadhogrc配置信息格式太严格了

{
    "disableCSSModules": true,
    "autoprefixer": {
        "browsers": [
            "last 4 versions", 
            "Firefox ESR", 
            "> 1%", 
            "ie >= 8", 
            "iOS >= 8",
            "Android >= 4"
       ]
    },
    aa: "a"
}

必须完全是json标准格式，key必须要用双引号包裹，value如果是有字符串类型也必须用双引号包裹。

在开发环境设置 <img src="img/logo.png"> 找不到

在开发环境下，引用图片
<div className='header__container--left'> <img src="img/logo.png" /> <div className='header__text'> {title} </div>

打开浏览器，图片无法显示，而且开发者工具里面显示的是

type 不是 png 而是 text\html 请问大大怎么解决这个问题。
使用 roadhog 时静态资源需要放在什么特殊的地方吗？ 附上我的配置文件和项目结构如下

能不能可以指定一些目录下的文件都走babel编译。

我将一些项目的通用代码抽出来，用npm pack打包成本地包，由于代码都是jsx+es6的，现在都是pack前用babel编译，这样其它项目使用的时候看到的是es5的代码。如果不用 babel编译后打包，会提示"SyntaxError: Unexpected token"的错误。

能不能类似src，我们指定其它几个node-modules目录下的js也需要babel编译？

新建了一个测试文件 ./test/users-test.js

新建了一个测试文件
./test/users-test.js
代码如下

import expect from 'expect';
import users from '../src/models/users';

describe('reducers', () => {

  describe('reducer', () => {
    it('it should save', () => {
      expect(users.reducers['save']({}, { payload: { data:[],total:1,page:1 }})).toEqual({list:[],total:1,page:1});
    });
  })
});

出现如下错误，请问babel-polyfill 要如何配置
$ roadhog test
/private/tmp/dva-example-user-dashboard/src/utils/request.js:34
var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(url, options) {

npm-install-webpack-plugin

https://github.com/ericclemmons/npm-install-webpack-plugin

整合antd-mobile 出错

{
  "entry": "src/index.js",
  "disableCSSModules": false,
  "autoprefixer": null,
  "proxy": null,
  "extraBabelPlugins": [
    "transform-runtime",
    ["import", { "libraryName": "antd-mobile", "style": true }]
  ],
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr"
      ]
    }
  }
}

error:

Error in ./src/index.js
Module build failed: ReferenceError: Unknown plugin "import" specified in "base" at 2, attempted to resolve relative to "/Users/macpro/develop/jaway/smartdrive/track/src"
    at Array.map (native)
 @ multi index

如何和 node 应用整合

提供中间件或其他方式，让使用 node 的开发模式更容易整合 roadhog 。

storybooks

https://github.com/storybooks/react-storybook

postcss-pxtorem 不能处理antd-mobile css

未采用roadhog时使用:

webpackConfig.postcss.push(pxtorem({
    rootValue: 100,
    propWhiteList: [],
  }));

能够正确处理antd-mobile和自己css文件中的单位
现在使用roadhog无法处理antd-mobile，但能够处理自己的css文件:

let postcss = webpackConfig.postcss();

  postcss.push(pxtorem({
    rootValue: 100,
    propWhiteList: [],
  }));

  webpackConfig.postcss = function () {
    return postcss;
  };

支持 webpack.config.js 的编程配置，但不推荐

⚠️⚠️⚠️ 使用这种配置方式将不能保证 roadhog 之后的无缝升级，比如切换到 webpack2，rollup 或者其他，比如内部配置变更也可能导致失效。

所以会在支持的同时给予 WARN 警告。

BROWSER=none roadhog server

facebook/create-react-app#1247

Then, remove roadhog server --no-open。

构建失败时做系统声音通知

https://github.com/jannesmeyer/system-bell-webpack-plugin

新增 ie8 配置

https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8

在 webpack.config.js 中加上 es3ify-loader 。

新增 multipage 配置，支持多页应用

"multipage": true 时使用 CommonsChunkPlugin 提取公用的 common.js 。

.roadhogrc

{
    "disableCSSModules": true,
    "less": true,
    "autoprefixer": {
        "browsers": [
            "last 4 versions",
            "Firefox ESR",
            "> 1%",
            "ie >= 8",
            "iOS >= 8",
            "Android >= 4"
        ]
    }
}

index.less

.box {
    background: red;
}

index.js

import './index.html'
import './index.less'

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {

    componentDidMount() {
     
    }
    
    render() {
        return (
                <div className="box">
                    测试
                </div>
        )
    }
} 

 ReactDOM.render( <App />, document.getElementById('root'))

启动报错

@ start /Users/MacHewleet/Workspace/SAW_S/testtest

roadhog server

/Users/MacHewleet/Workspace/SAW_S/testtest/node_modules/roadhog/bin/roadhog.js:9
const [major, minor] = nodeVersion.split('.');
^

SyntaxError: Unexpected token [
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:405:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:430:10)
at startup (node.js:141:

sorrycc / roadhog Goto Github PK

roadhog's Issues

.roadhogrc

index.less

index.js

Recommend Projects

Recommend Topics

Recommend Org