问一下大家在项目中使用react的时候一些工程化的问题

**hufeng** · March 5, 2015, 1:35pm

@jiyinyiyong 在使用的过程中有没有发现问题，我们使用的情况来看还是挺好用的，尤其和React的搭配比较无缝。唯一的一个问题就是在最终上线打包的时候出现了代码一样，但是生成的chunkhash不一致的问题（微博和题叶沟通过）。在github上面发了一个issue，作者标记为bug。但是还不知道什么时候可以解决（据说是因为sourceMap的绝对路径的问题）。暂时先忍了。

**jiyinyiyong** · March 6, 2015, 3:08am

这么说没有用 SourceMap 可以逃过一劫是么…
话说我觉得 Webpack 打包的代码不像是 requirejs 打包时候那么简单, 结果是文件不能直接用 Workspace 映射了, 这种情况下 SourceMap 的帮助有限呢, 所以我现在都很少用 SourceMap 了.

**dabbler** · March 29, 2015, 9:31am

刚从require转webpack，遇到了打包后，html上引用的文件如何动态处理？想到了生成的map文件，可是path没法跟实际的引用匹配，大家有其他好的方法吗?

**hufeng** · March 30, 2015, 1:48am

是html动态的处理webpack打包(比如加chunkhash)文件嘛？

**jiyinyiyong** · March 30, 2015, 2:48am

我的写法是按照官方的先把 assets.json 生成出来, 然后用 gulp 编译 jade, 文件路径作为模版的参数传进去.
如果是服务端渲染模版, 这个办法也不错的.
官方有个例子可以看下:

github.com

webpack/react-starter/blob/2263dc925f2c03ecbd68e11b7589ba661e53d835/lib/server.js#L15


	var path = require("path");
	var uuid = require("uuid");
	var DB = require("./DB");


	// require the page rendering logic
	var renderApplication = options.prerender ?
		require("../build/prerender/main.js") :
		require("../config/simple.js");


	// load bundle information from stats
	var stats = require("../build/stats.json");


	var publicPath = stats.publicPath;


	var STYLE_URL = options.separateStylesheet && (publicPath + "main.css?" + stats.hash);
	var SCRIPT_URL = publicPath + [].concat(stats.assetsByChunkName.main)[0];
	var COMMONS_URL = publicPath + [].concat(stats.assetsByChunkName.commons)[0];


	var app = express();


	// serve the static assets

**hufeng** · March 30, 2015, 2:56am

我们的思路和@jiyinyiyong很类似，根据官方的指导提取打包文件信息webpack long cache

不过我们使用的jsp所以有点难处理，于是就用cheerio去找到要替换的script的src，在script上添加id(entry的key）。

**dabbler** · March 30, 2015, 10:10am

开发目录，如何能debug?还是说必须编译到指定目录

**dabbler** · March 30, 2015, 10:11am

因为在开发目录，再不引人require或者sea的情况下，肯定是没法运行的。需要webpack包装一下。我想问的是，再开发目录，能做到debug吗？可能和这个问题比较2

**jiyinyiyong** · March 30, 2015, 12:24pm

Webpack 代码都是编译后运行的, 跟 RequireJS 或者 Sea.js 实际上不一样, 而是更接近 Browserify.

**dabbler** · March 30, 2015, 1:11pm

恩，了解了，我想大概也是这样，谢了

**v26** · March 31, 2015, 2:13am

试试 spm-webpack + spm-webpack-server 打包+本地开发

**hufeng** · March 31, 2015, 3:21am

哪些地方特别出彩？求分享？

**tantan** · April 10, 2015, 4:08pm

Webpack很好，我们一直用，而且可以支持es6

**jhsea3do** · May 9, 2015, 6:19pm

目前是用requirejs

把 jsx 文件分为 view 和 ui 两个目录，开发的时候直接调试 jsx, 发布时用 grunt-react 将目录下的文件输出到 view.js 和 ui.js

但我也遇到问题，我用的 react-router 用chrome react tool 查看页面时，发现每加载一次页面
下面就会多出一个，项目周期紧也没时间查原因

**polyaction** · May 16, 2015, 10:02am

为何没切换成webpack?

**jiyinyiyong** · May 17, 2015, 5:01pm

时间不对吧. 我已经是 Webpack 了

**jan** · May 18, 2015, 7:05am

browserify + gulp

**shane13hsi** · May 20, 2015, 3:49am

Webpack。参考的是这个项目 https://github.com/steida/este 。webpack 的配置可读性比较差，configuration 的选项太多了。 este 的够用也不多。

**tsing** · May 20, 2015, 4:00am

使用 webpack 打包 docker 部署

**foomorrow** · May 29, 2015, 3:22pm

目前是采用requireJS+webpack的玩法，在html上用requirejs加载webpack的entrys，发布生产环境时自动把webpack生成的带有chuckhash的entrys配到requireJS的paths里，这样在开发和生产环境时也只用一套代码，html中引入的script标签也只有require这一个，减小了前端项目与服务端模板的耦合。