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

**keith** · February 7, 2015, 12:43pm

主要是如何打包，部署，用些什么方法或者技术呢？
现在我们用webpack，然后配置hash，准备写一个脚本，每次打包后把所有页面扫描一次，把引用js文件的地方替换为新的js文件

**jiyinyiyong** · February 7, 2015, 1:23pm

听楼主说的像是用了 WebPack 但是没有用 CommonsJS…?

我在 Teambition 用的方案还是 Requirejs, 打包有 requirejs 模块自己处理, hash 是自己写脚本生成的.
挺希望以后能切换 WebPack 的… 就是门槛高了点, 需要点时间

**cgx9** · February 8, 2015, 1:55pm

我是用Browserify＋gulp，直接打包成一个文件了。webpack理论上应该也不会差太多吧？应该不需要这么麻烦。

**zongwei_007** · February 8, 2015, 2:23pm

我同样用的webpack，但另外用了gulp来做任务管理。js的引用问题是通过gulp-inject把js的注入到html中来解决的。

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

恩，webpack整合的更好点，就不需要gulp了。

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

用了commonjs

**jiyinyiyong** · March 5, 2015, 1:25pm

我已经切换 Webpack 了.

**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