文件管理 · 2023年11月27日

reactjs文件下载|javascript h5 app(reactjs)中如何下载附件(url链接形式)并在新窗口中打开附件

Ⅰ 如何在React中调用微信的jsSDK

1. 微信JSSDK使用步骤简介

我们既然是在做基于微信的开发,当然就离不开微信的开发文档了。开始之前希望大家能先去看下《微信JS-SDK说明文档》。那么我们怎么样才能用上微信的JSSDK呢?以下基本步骤就是基于该文档的。

需要注意的是,如果本人下面的描述你看的有点云里雾里的话,我建议你:

回头看下本系列《小白学react》的历史基础文章,特别是《小白学react之altjs的Action和Store》以及《小白学react之打通React Component任督二脉》,或/和:

直接跳过我的描述,在文章后面下载最新的源码,先阅读源码,碰到问题再反过来看文章的描述。

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注:登录后可在“开发者中心”查看对应的接口权限。

这里绑定的时候需要注意不要带前面的http协议头。写法跟上一篇《小白学react之网页获取微信用户信息》中的网页回调域名设置的写法是一样的。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):请注意,如果你的页面启用了https,务必引入 :,否则将无法在iOS9.0以上系统中成功使用JSSDK

因为我们的index.html是通过ejs模版生成的,所以我们只需要在我们的index.ejs中的body部分末尾加入相应的微信jssdk库的引用就好了。

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %> <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script> <script src="jweixin-1.0.0.js"></script> <% } %>

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2});

这一步的关键是如何生成正确的签名。这里微信jssdk文档中有给出不同语言版本的签名算法示例大家可以参考。往下我们也会就github上的一个签名算法的封装进行学习。

在我们的实战过程中,签名会在服务器端发生。

react客户端会像之前的获取微信用户信息一样,通过一个restfulApi调用服务器端的api,然后由服务器来生成对应的签名,然后将签名信息返回给客户端。

客户端获取到上面wx.config示例代码中的签名相关信息后,就会调用一个Alt的Action,来触发将获取回来的信息保存到一个跟该Action绑定的jssdk状态管理的Store里面。然后就可以调用wx.config来配置我们需要用到的JS接口列表了。

注意这里的wx这个对象是通过上一步的JS文件引入进来的。我们在react的客户端代码中可以直接通过window.wx对其进行引用:

window.wx.config({…});

步骤四:通过ready接口处理成功验证

wx.ready(function(){ // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。});

随后,react客户端负责jssdk状态管理的store会调用wx.ready来监听config配置是否成功,如果成功的话,就会将该store的一个ready状态设置成true。

这样的话,通过AltContainer绑定了该store的相应的Component组件就能知道响应的jssdk的api是否已经准备就绪,可以进行调用了。

步骤五:通过error接口处理失败验证

wx.error(function(res){ // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。});

同理,如果如果配置失败的话,那么就在wx.error这个监听接口中将ready状态设置成false。

2. 生成签名

如前面所述,我们需要用到jssdk的页面必须要要注入调用到的api的配置信息。

wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表

而注入JS接口到页面时,我们可以看到,还需要使用到其他一些信息。其中appId我们可以从公众号管理后台获得。signature是跟所访问页面的url关联的一个签名,它有专门的一套算法来生成。另外两个参数nonceStr和signature都是在签名的过程中生成的。

这里通过wx.config传进去这些参数,主要是为了让微信去判断我们生成的签名和微信通过这些信息生成的签名是否一致,如果不一致的话,那么注入到该页面的jsApiListj就失败。

那么我们在服务器这边的签名算法是如何的呢?根据微信开发文档我们需要提供以下4个参数,然后通过sha1算发来生成对应的签名:

noncestr:一个随机字符串,我们随便填写

jsapi_ticket:jsapi_ticket是公众号用于调用微信JS接口的临时票据

timestamp: 签名时间戳。注意这个时间戳需要和上面传入wx.config的时间戳一致

url: 调用JS接口页面的完整URL。我们可以从react客户端通过location.href获得,并传给服务器端

那么这里主要需要解决的就是如何获得jsapi_ticket这个临时票据了。

根据文档的描述,我们可以通过以下这个接口获得:

cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

从中可以看到,我们调用这个接口首先要获得一个access_token。这里微信也有相应的api来处理。

cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

这里需要用到我们的微信公众号的appId和secret,这些我们都是已知的,所以好办。

那么,也就是说,我们其实只需要提供我们的微信公众号的appId和secret,就能获取到access_token,从而就会获得我们需要的jsapi_ticket。

这里我们参考下github上一个示例(wechat-sdk-demo )的签名的实现。其传入的参数有两个,其中:

url: react客户端传进来的需要注入jsapi的页面url

callback: 一个回调函数,接受一个json格式的参数。主要是用来将生成的签名信息等回传给上层调用函数。

const config = { grant_type: 'client_credential', appid: 'xxxx', secret: "xxxxx", noncestr:'Wm3WZYTPz0wzccnW', accessTokenUrlin.qq.com/cgi-bin/token', ticketUrl:'com/cgi-bin/ticket/getticket',}exports.sign = function (url,callback) { var noncestr = config.noncestr, timestamp = Math.floor(Date.now()/1000), //精确到秒 … request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){ if (!error && response.statusCode == 200) { var tokenMap = JSON.parse(body); request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){ if (!error && response.statusCode == 200) { var ticketMap = JSON.parse(json); cache.put('ticket',ticketMap.ticket,config.cache_ration); //加入缓存 callback({ noncestr:noncestr, timestamp:timestamp, url:url, jsapi_ticket:ticketMap.ticket, signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url) }); } }) } }) }}

这里的流程和我们刚才描述的并无二致。首先是通过appId和secret获得调用获取jsapi_ticket的access_token,然后通过该access_token获得我们签名需要用到的jsapi_ticket。noncestr我们是提前随便填写好的。timestamp的算法也比较简单。

最后就是通过sha1这个库提供的方法,将jsapi_ticket,noncestr,timestamp和页面url进行sha1签名,然后将以上这些信息通过callback返回给上层调用函数。

那么我们往下看下我们的上层调用函数。其实就是我们的express路由:

app.get("/api/signature", function(req,res) { const url = req.query.url.split('#')[0]; signature.sign(url,function(signatureMap){ signatureMap.appId = wechat_cfg.appid; res.send(signatureMap); });})

根据微信开发文档需求,我们首先需要将传进来的url的锚点后面的数据给去掉,保留前面的有效部分。

然后就是调用上面的sign方法来生成签名。上面的签名方法最后传进来的json数据就是这里的signatureMap。我们最终会将这些数据发送回react客户端。

同时,通过上面的wx.config的示例,我们知道还需要用到微信公众号的appId。所以这里一并将其放到signatureMap中进行返回。

那么到此为止,react客户端调用服务端的"/api/signature"返回的数据示例如下:

{noncestr: 'Wm3WZYTPz0wzccnW',timestamp: 1476873698,url: 'com/?code=&state=',jsapi_ticket: 'sM4AOVdWfPE4DxkXGEs8VBqyVbs-TKGYp4d_ZSQa0Q5WvvMUPNQ6XGpyEcgKOD_xID_GrMCaalSmIF9JbrGaOg',signature: ''}

3. 客户端获取签名信息

3.1 获取签名信息并注入jssdk

和之前的获取微信用户信息一样,我们这里会建立一个新的Source文件WechatSdkSource.js来调用远程服务器的"/api/signature"接口:

var WechatSdkSource = {fetchSignatureMap() { return { remote(state,url) { return co(function *() { let signatureMap = null; const getSignatureMapUrl = `/api/signature`; try { let result = yield request.get(getSignatureMapUrl).query({url:url}); signatureMap = result.body; } catch (e) { signatureMap = null; } //console.log("userInfo:", userInfo); return signatureMap; }); }, local() { // Never check locally, always fetch remotely. return null; }, success: WechatSdkActions.updateSignatureMap, error: WechatSdkActions.getSignatureMapFailed, loading: WechatSdkActions.getSignatureMap, }}};

这里传进来的url由下面将要谈及的上层函数所生成。整个流程就没有什么好说的了,说白了就是通过相应的库发送一个带有url的query参数的请求到服务器端来请求签名信息,相信有跟着这个系列文章的朋友都是很清楚的了。

最终请求成功返回的时候就会调用WechatSdkActions的updateSignatureMap这个Action。

var alt = require('../alt');mole.exports = alt.generateActions( 'updateSignatureMap', 'getSignatureMap', 'getSignatureMapFailed',);

而这个action就会触发所监听的WechatSdkStore的onUpdateSignatureMap这个回调。

class WechatSdkStore { constructor() { this.signatureMap = []; this.errorMessage = null; this.ready = false; this.bindActions(WechatSdkActions); this.exportAsync(WechatSdkSource);

Ⅱ javascript h5 app(react.js)中如何下载附件(url链接形式)并在新窗口中打开附件

我们只要用content创建一个ObjectURL并赋值给aLink即可解决文件类型的限制问题。文件的自动下载也挺好办回,自己构建一个答UI点击事件,再自动触发下,就能实现自动下载啦。现在来看看最终代码:代码如下:function downloadFile(fileName, content){ var aLink = document.createElement('a'); var blob = new Blob([content]); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(evt);}现在,只要一调用downloadFile,文件就自动下载了

Ⅲ 如何学习用Typescript写Reactjs

1.安装node,因为ts的编译器是js/ts写的; 安装node后同时获得npm命令,这是nodejs世界里的包管理器(也可以看作node的app商店);2.安装vs 2015或者vs code,当然这不是必须的,但是这里强烈推荐写ts的工具,vs第一,vsc第二;3.vs自带了TypeScript(vs2012+,vs2015update1自带了ts1.7),最新版本的typescript for vs去官网下载即可, 或者如果不依赖vs(比如mac环境), 可以用命令行装ts编译器 npm i -g [email protected]4. 安装了ts后, 就会有2个命令可用:tsc和tsd, tsc用来编译TypeScript代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件),熟练使用tsd,工作效率提升,因为减少了80%查文档的时间,所以写ts可以说是jser打通了任督二脉,上手任何新的开发环境都很快;5. 命令行下载react的ts头文件,tsd install react-global –save注意上面之所以写 react-global 而不是react, 因为我们接下来使用比较原始的写法,直接把React当作全局对象使用, 而不作为es6模块(必须用import引入),不需要Babel编译也不需要webpack打包;上面执行的tsd命令下载了ReactJS类库的头文件, 下面用tsc命令创建一个ts项目配置文件tsc –init命令创建了tsconfig.json配置文件, 打开该文件增加"jsx": "react", 就是自动把tsx变成最终的js, 而不是jsx把"outDir": "built", 这行去掉,这样编译的文件就会在当前目录输出 "target": "es5", 这里es3改成es5, "watch": true 是否监听文件修改 如果你用的是vs,这行不重要6.下载reactjs文件,如果没有安装bower命令,可以手动去官网下载react类库bower install –save react7.以上环境配置好了, 开始写代码:创建一个demo.tsx文件(注意这里是tsx, 不是ts也不是jsx)创建一个demo.html, 添加文件的引用<!doctype html><html><head> <script src="bower_components/react/react.min.js"></script> <script src="bower_components/react/react-dom.min.js"></script> <script src="demo.js"></script></head><body> </body></html>8. demo.tsx 写代码class MyClass extends React.Component<any, any> { render() { return <h1>hello {this.props.name}</h1>; }}document.addEventListener('DOMContentLoaded', function () { ReactDOM.render(<MyClass name="Tom" />, document.body);});9. 如果保存了demo.tsx后, 没有在目录下发现自动编译了demo.js, 那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行tsctsc命令会自动根据tsconfig.json里面配置的情况, 自动帮你把代码编译成js, 这是编译后的js文件10. 打开demo.html可以看到效果了;11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;12. 下班, 有空再写;------时间分割------13、继续写,对1-12进行润色,转入传教模式;以上的代码,工厂方法在创建子类的同时,做了一些初始化的动作,这与单纯的原型继承不同,所以在使用class方式进行子类继承,这样的写法是无效的;class MyView extends React.Component { render() { return <h1>hello {this.state.name}</h1>; //会抛异常,因为state是null } //不起作用的 getInitialState:(){ return {name:'',age:20}; }}需要改成如下方式,下面是官网给出的方案(这里TypeScript和ES6情况是一样的)class MyView extends React.Component { constructor(props, context) { super(props, context); this.state = { name: '', }; } render() { return <h1>hello {this.state.name}</h1>; }}16、当组件化遇到强类型:从前写JS组件,一般复用性比较差,基本写完就仍,原因如下:1)暴露了太多的Dom结构以及别的实现细节;2)命名挫,缺乏可记忆性,本身编程中变量和方法的命名对于码农来说就是天坑;3)JS天生缺乏私有和公共成员的约束,不加注释根本不知道怎么使用该类库/组件;React解决了把dom标签暴露出去的问题,TS则解决了语言层面的问题,并提供了强大的重构能力,你根本不需要记住组件的API,因为工具会列出来;

Ⅳ sublime text 3 reactjs插件怎么使用

安装操作系统常用的两种方法:光驱安装系统法:1.请您开机按F2键进入BIOS设置,Boot菜单下BootDevicePriority选项设置光驱引导启动,按F10键保存退出。2.插入系统安装盘,提示按任意键进入系统安装界面,根据提示分区安装系统,系统安装完毕请到三星官网下载驱动即可。U盘安装系统法:1.用第三方U盘制作软件制作U盘启动盘,并下载正版系统镜像或纯净版镜像,下载文件包后解压缩找到(文件后缀名:ISO),拷贝到U盘根目录。2.开机按F2键进入BIOS选择Advanced选项下FastBiosMode设置为“Disabled”按F10键保存退出。3.重新启动电脑按F10键进入快速引导启动,选择U盘引导进入安装界面,当出现“pleaseanykeybootfromcd…..”提示,快速按键盘任意键进入安装画面。4.加载必要文件后,进入到安装界面,选择现在安装。5.根据提示选择主分区后开始安装系统。6.开始安装后,系统会自动复制文件(其中会有1-2次重启,让系统自动重启即可,不需要手动操作)7.安装过程中,提示语言、输入法、用户名等,按照提示选择下一步即可(其中零售版会提示输入序列号,输入序列号即可)9.选择完毕继续复制文件,复制完文件根据提示选择后系统安装完毕。注:此安装方法为标准版系统安装盘安装方法,如GHOST、番茄花园等系统不适用于此安装方法。

Ⅳ 为什么ReactJS在中国一点没有起色

1.安装node,因为ts的编译器是js/ts写的;安装node后同时获得npm命令,这是nodejs世界里的包管理器(也可以看作node的app商店);2.安装vs2015或者vscode,当然这不是必须的,但是这里强烈推荐写ts的工具,vs第一,vsc第二;3.vs自带了TypeScript(vs2012+,vs2015update1自带了ts1.7),最新版本的typescriptforvs去官网下载即可,或者如果不依赖vs(比如mac环境),可以用命令行装ts编译器[email protected].安装了ts后,就会有2个命令可用:tsc和tsd,tsc用来编译TypeScript代码,tsd用来下载第三方js类库的ts定义文件(或者叫头文件),熟练使用tsd,工作效率提升,因为减少了80%查文档的时间,所以写ts可以说是jser打通了任督二脉,上手任何新的开发环境都很快;5.命令行下载react的ts头文件,tsdinstallreact-global–save注意上面之所以写react-global而不是react,因为我们接下来使用比较原始的写法,直接把React当作全局对象使用,而不作为es6模块(必须用import引入),不需要Babel编译也不需要webpack打包;上面执行的tsd命令下载了ReactJS类库的头文件,下面用tsc命令创建一个ts项目配置文件tsc–init命令创建了tsconfig.json配置文件,打开该文件增加"jsx":"react",就是自动把tsx变成最终的js,而不是jsx把"outDir":"built",这行去掉,这样编译的文件就会在当前目录输出"target":"es5",这里es3改成es5,"watch":true是否监听文件修改如果你用的是vs,这行不重要6.下载reactjs文件,如果没有安装bower命令,可以手动去官网下载react类库bowerinstall–savereact7.以上环境配置好了,开始写代码:创建一个demo.tsx文件(注意这里是tsx,不是ts也不是jsx)创建一个demo.html,添加文件的引用8.demo.tsx写代码classMyClassextendsReact.Component{render(){returnhello{this.props.name};}}document.addEventListener('DOMContentLoaded',function(){ReactDOM.render(,document.body);});9.如果保存了demo.tsx后,没有在目录下发现自动编译了demo.js,那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行tsctsc命令会自动根据tsconfig.json里面配置的情况,自动帮你把代码编译成js,这是编译后的js文件10.打开demo.html可以看到效果了;11.至于题主说怎么学习,其实跟JS完全没两样,上面demo.tsx的代码,跟react官网的es6写法一模一样多了这两个prop和states类型约束,仅此而已;11.至于题主说怎么学习,其实跟JS完全没两样,上面demo.tsx的代码,跟react官网的es6写法一模一样多了这两个prop和states类型约束,仅此而已;12.下班,有空再写;------时间分割------13、继续写,对1-12进行润色,转入传教模式;以上的代码,工厂方法在创建子类的同时,做了一些初始化的动作,这与单纯的原型继承不同,所以在使用class方式进行子类继承,这样的写法是无效的;classMyViewextendsReact.Component{render(){returnhello{this.state.name};//会抛异常,因为state是null}//不起作用的getInitialState:(){return{name:'',age:20};}}需要改成如下方式,下面是官网给出的方案(这里TypeScript和ES6情况是一样的)classMyViewextendsReact.Component{constructor(props,context){super(props,context);this.state={name:'',};}render(){returnhello{this.state.name};}}16、当组件化遇到强类型:从前写JS组件,一般复用性比较差,基本写完就仍,原因如下:1)暴露了太多的Dom结构以及别的实现细节;2)命名挫,缺乏可记忆性,本身编程中变量和方法的命名对于码农来说就是天坑;3)JS天生缺乏私有和公共成员的约束,不加注释根本不知道怎么使用该类库/组件;React解决了把dom标签暴露出去的问题,TS则解决了语言层面的问题,并提供了强大的重构能力,你根本不需要记住组件的API,因为工具会列出来;

Ⅵ react 为什么分为server 和 client

客户端渲染路线:1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于可以运行,由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地,把数据渲染为响应页面服务端渲染路线:2. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染(服务端性能好,较快) -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小,渲染快 )

Ⅶ react–使用js-xlsx实现excel文件的导入导出及预览

    最近公司项目要求对之前后端excel操作做优化,需要放到前端来做。讲道理,我觉得没啥子必要,尤其是当我在官网导入一张5k+的excel时浏览器卡死后更是觉得需求之智障。但是没法子,还是要先自己做出来看看实际效果才行,我直接原地6个点…… 导出      安装依赖         cnpm i xlsx –save      实现          定义公共组件Excel,该组件需要提供导出按钮,当点击时触发相应逻辑          组件可接收的参数如下                 默认值如下              根据传入的type类型决定到底是显示导入、导出、预览按钮还是都显示              当点击导出按钮,触发回调                 引入xlsx                 导出逻辑                 首先要做的就是校验是否用户自己实现了导出函数,以及传入的数据是否为数据且是否为空,由于不止导出要用,故放到untils中作公共函数,其他的辅助函数也从中导出                      isVoid函数                       getTable函数                      getSheetHead函数                     format函数                      getCharCol函数              导出结果如下      改进         可能你也发现了,导出的结果是没有样式信息的,那么如何增加样式呢?答案是xlsx-style          安装依赖             cnpm i xlsx-style –save             npm install file-saver –save          xlsx-style导入报错             将报错文件一份,修改后放到assets目录下             找到umijs的webpack配置文件,新增如下配置          增加文字颜色和首行高亮处理                 增加辅助函数calculateWidth                 增加辅助函数addHeadlineStyle                 导出方式使用filesave                 效果如下 导入         现在,我们来完成导入功能,并且导入后需要使用表格进行分页预览          新增modal弹窗,用作预览界面         对应函数renderBody如下         对应函数renderButton如下         对应函数onPageChange如下         点击导入按钮,回调处理如下         新增的辅助函数如下         新增组件状态如下         导入预览效果如下 文档     https://www.npmjs.com/package/xlsx-style     https://github.com/eligrey/FileSaver.js     https://www.npmjs.com/package/xlsx?activeTab=readme 如有问题,欢迎评论指正哦~~ 最后,还有个很重要的事情,点个赞再走吧,客官~~

Ⅷ Hbuilder可以用react.js吗

可以,hbuilder是一个编辑器,你甚至可以用记事本去写代码,但别忘记引用hbuilder是一个编译器,你只要引入react.js就好了啊。根本没什么冲突啊

Ⅸ WebPack打包React项目, 减小打包后生成的js文件.

Warning: It looks like you’re using a minified of the development build of React. When deploying React apps to proction, make sure to use the proction build which skips development warnings and is faster. See http://facebook.github.io/react/downloads.html for more details. “` 这里分别把 使用的 react , react-dom , jquery , react-router , 第三方库提了出来单独生成文件vendor.js 首先安装依赖: extract-text-webpack-plugin , 之后在webpack中进行配置 **注意: ** 例子中配置中 {publicPath: './'} 不是必填项, 我这里是为了解决背景图片打包或路径不正确的问题, 具体请查看