Repository navigation
roadhog 2.0 发布 #55
Description
Activity
之前有用 src/index.ejs，需移到 public/index.html，并手动引入 CSS 和 JS
如果开启了 hash，这个 html 岂不是要手动维护。
这个
public/index.htmldev 用（dev 时不会开 hash 的），build 后通常不会用到静态的 html。之前的 html 生成没处理好，很多反馈，就先下掉了，后面后需求再加上。这样会让人误解的，public/index.html 引用的 index.js 在 dist 里根本不存在。
“出错点击后跳转到 IDE” 这个 IDE如何设置？
“出错点击后跳转到 IDE” 这个 IDE如何设置？
不用设置，自动判断的。
不用设置，自动判断的。
我点击后打开的是sublime text，但是我想让他用web storm打开。是和操作系统的设置有关？比如js文件的默认打开程序？但是我.js默认使用VSCode打开的。
你把 sublime 关了，然后开着 webstorm，看下是用什么打开的。
明白了，要设置REACT_EDITOR环境变量
Could not open search.js in the editor.
The editor process exited with an error: spawn code ENOENT.To set up the editor integration, add something like REACT_EDITOR=atom to the .env.local file in your project folder and restart the development server. Learn more: https://goo.gl/MMTaZt
由于 babel@7 无法使用 babel-plugin-add-module-exports，所有的 require('./file') 需改为 require('./file').default
感觉这个对原项目的改动会很多，暂时还是用1.3.0版本，等以后解决这个问题了再考虑升版本。dllPlugin (学习成本太高，并且有其他方法可以提升 dev server 启动速度)
有什么办法可以提高dev server速度的么？现在没了dll plugin，启动速度和重新编译速度都很慢。我的项目要半分钟了。原来使用dllplugin的时候是重编速度6-7秒。
感觉这个对原项目的改动会很多，暂时还是用1.3.0版本，等以后解决这个问题了再考虑升版本。
require 用的地方应该不多吧，大部分应该是 import 才对。而且
require().default是标准的写法，应该不会再回去了，拥抱变化吧，🤗。Reacted by Yanghc, fred, kodomozz, nnqiu and Yvan Wang👍 2.0 普天同庆
commons这个选项给了代码块分割手动干预的更多定制define、alias简直是目录结构强迫症的福音
除了create-react-app外，用来快速迭代，接近0配置的不二选择。
81 remaining items
@sorrycc 您好，我刚接触这个，不是太懂，想请教您一下：我想使用
antd-theme-webpack-plugin插件来修改主题，但不知道该怎么配置，文档里给的使用方法如下：
`const themePlugin = new AntDesignThemePlugin(options);
// in config object
plugins: [
themePlugin
]Add this plugin in `plugins` array.` 但我的.webpackrc.js配置文件里没有plugins，内容如下： `export default { entry: 'src/index.js', extraBabelPlugins: [ "@babel/plugin-transform-runtime", ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], ], env: { development: { extraBabelPlugins: ['dva-hmr'], } }, externals: { '@antv/data-set': 'DataSet', rollbar: 'rollbar', }, alias: { components: path.resolve(__dirname, 'src/components/'), }, ignoreMomentLocale: true, theme: './src/theme.js', html: { template: './src/index.ejs', }, lessLoaderOptions: { javascriptEnabled: true, }, disableDynamicImport: true, disableCSSModules:false, publicPath: '/', hash: true, };` 请问themePlugin该放在哪个里面？在index.js中引用了sass文件
import './css/index.scss';
用的html模板index.ejs
编译之后看到html多出一个style标签，里面存的都是我的sass文件内容而没有编译过
我的配置如下：
{
"entry": "./src/index.js",
"define": {
"process.env.NODE_ENV": "development"
},
"html": {
"template": "./src/index.template.ejs"
},
"disableCSSModules": true
}
我配置中加上sass也没用，配置如下：
{
"entry": "./src/index.js",
"define": {
"process.env.NODE_ENV": "development"
},
"html": {
"template": "./src/index.template.ejs"
},
"disableCSSModules": true,
"sass": {
"file": "./src/css/index.scss"
}
}如果你有用 babel-polyfill，更换为 @babel/polyfill如果有 babel-runtime 依赖和配置了 babel-plugin-transform-runtime 插件，需删除，因为已内置处理，否则可能会报 this.setDynamic is not a function 的错误由于 babel@7 无法使用 babel-plugin-add-module-exports，所有的 require('./file') 需改为 require('./file').default如果有用 babel-plugin-dva-hmr，请升级到 0.4.x，发自我的华为手机-------- 原始邮件 --------主题：Re: [sorrycc/blog] roadhog 2.0 发布 (#55)发件人：Pecking 收件人：sorrycc/blog 抄送：zhouyi 270061378@qq.com,Mention 这样手动删除了babel-plugin-transform-runtime,他会报错不存在这个依赖;怎么解决了？ —You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread. {"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/sorrycc/blog","title":"sorrycc/blog","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"[https://github.com/sorrycc/blog"}},"updates":{"snippets":{"icon":"PERSON","message":"@Pecking in #55:
\r\n
%5Cr%5Cn!%5Bfqr) 6d91dskz_cvwt w d]([https://user-images.githubusercontent.com/27414779/39610962-7511ab90-4f86-11e8-8e44-db64e50cd849.png)\r\n这样手动删除了babel-plugin-transform-runtime,他会报错不存在这个依赖;怎么解决了？"}],"action":{"name":"View](https://user-images.githubusercontent.com/27414779/39610962-7511ab90-4f86-11e8-8e44-db64e50cd849.png)%5Cr%5Cn%E8%BF%99%E6%A0%B7%E6%89%8B%E5%8A%A8%E5%88%A0%E9%99%A4%E4%BA%86babel-plugin-transform-runtime,%E4%BB%96%E4%BC%9A%E6%8A%A5%E9%94%99%E4%B8%8D%E5%AD%98%E5%9C%A8%E8%BF%99%E4%B8%AA%E4%BE%9D%E8%B5%96;%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3%E4%BA%86%EF%BC%9F%22%7D%5D,%22action%22:%7B%22name%22:%22View) Issue","url":"#55 (comment)"}}}
按你说的做了还是报了this.setDynamic is not a function的错,根本就没有解决
roadhog 建构完的包很大，怎样使用tree-shaking
roadhog2.0这个版本支持webpack-deep-scope-plugin？
"build": "cross-env NODE_ENV=prd roadhog build"这个命令在文件中判断环境 process.env.NODE_ENV的值怎么不是prd
“build”：“cross-env NODE_ENV = prd roadhog build”这个命令在文件中判断环境process.env.NODE_ENV的值怎么不是prd
define 用不了
DISABLE_ESLINT
可以
DISABLE_ESLINT roadhog dev禁用，修改的话本地配.eslintrc就好了。how to disable eslint in roadhog@2.4.9 ?
要额外引 babel 插件的，1.0 的时候也是这样。
是babel-plugin-transform-decorators-legacy吧，我在.webpackrc这样配的"extraBabelPlugins": [ "transform-decorators-legacy", "lodash", ["import", { "libraryName": "antd-mobile", "style": true }] ],其他的步骤也照做了
请问你这样配了transform-decorators-legacy 生效了吗，为什么我的不生效呢。
export default {
entry: "src/index.js",
extraBabelPlugins: [
"transform-decorators-legacy",
["import", { libraryName: "antd", libraryDirectory: "es", style: true }],
]
}这样配transform-decorators-legacy 不生效。
要额外引 babel 插件的，1.0 的时候也是这样。
是babel-plugin-transform-decorators-legacy吧，我在.webpackrc这样配的"extraBabelPlugins": [
"transform-decorators-legacy",
"lodash", ["import", { "libraryName": "antd-mobile", "style": true }]
],其他的步骤也照做了
不知道你后来配置好了吗？我在我的webpackrc file中试了如下的配置：
extraBabelPlugins: [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }], ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }] ],但还是报错说 “Error: Cannot use the decorators and decorators-legacy plugin together”
为什么配置了代理但是不管用
为什么设置代理不管用
添加某些第三方依赖（eg griffith，yarn add griffith），其有es6语法，利用 extraBabelIncludes: [path.resolve(__dirname, './node_modules/griffith')] 或alias 都无法 转换es5 语法，使得build最后压缩报错：Failed to minify the bundle. Error: index.js from UglifyJs
Unexpected token: punc (() / ？；怎么破？好吧extraBabelIncludes不用path.resolve，extraBabelIncludes:['./node_modules/griffith','...']
趁着元旦，roadhog 2.0 发布了，我们一起来看看有啥变化吧。
👏 👏 👏
一、
首先，我们把底层重写，基于 af-webpack。
为啥要基于 af-webpack？单看 roadhog，这意义不大，但如果有数个工具都基于 af-webpack 做上层封装，那么就意味着 webpack 工具层的配置统一。 尤其对我们内部来说，有 4-5 个工具，每个工具有各自的配置方法，对于开发者来说无疑是个灾难。对外部的同学来说，umi 和 roadhog 都基于 af-webpack，那么之后在这两个工具之间切换，webpack 的配置层是无需变动的。
另外，大家会发现 roadhog 的 issue 维护不太积极，是因为我的工作重心目前不在这，而是在 umi 上。所以切换到 af-webpack，af-webpack 是 umi 的底层共建，这样就可以变相地保证我在这个项目上的投入。
同时，为了更通用，配置文件从
.roadhogrc更名为.webpackrc。二、
然后，在体验上，保持了和 create-react-app 最新版一致。像是 redbox 显示出错信息、HMR、出错点击后跳转到 IDE、ESLint 出错提示等等。
并在此基础上，增加了：
三、
roadhog 从命令的维度看，包含 dev (mock)，build，test。
变化是：
四、
配置项即功能，这里有比较大的变化。
不再支持的有：
功能变化的有：
新的有：
五、
此外，还有一些变化：
src/index.ejs的方式生成 Html六、
最后，我们对照 ant-design-pro 的升级 PR 来看下如何升级到 raodhog@2 。
对于大部分的应用来说，只要：
然后，由于内置了
babel@7，@babel/polyfillthis.setDynamic is not a function的错误require('./file')需改为require('./file').default再然后，如果有
src/index.ejs，需要额外配置 html 属性，最后，有些配置不再支持，需考虑替代方案或使用 webpack.config.js 进行配置。
（完）