webpack打包调试react并使用babel编译jsx配置方法 - 学习备忘 - ITeye技术网站
博客分类：
安装webpack
npm i webpack --save-dev
如果使用 -g参数，可以安装到全局使用，在当前目录安装，可执行文件为 ./node_modules/.bin/webpack
配置webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'),
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
entry为打包的入口文件，output为打包后生成的文件名及路径。
源代码可以编写成多个文件，然后由入口文件调用组装，相互独立的组件最好分别单独写在一个文件中
打包源文件
在当前目录执行webpack 或 ./node_modules/.bin/webpack 命令，就可以将源文件打成生成build/bundle.js文件，网页中直接作用&script src="build/bundle.js"&&/script&来调用即可
本地开发调试
先安装 webpack-dev-server
npm i webpack-dev-server --save
在package.json文件中scripts下面添加相应的配置（可以使用npm init来生成package.json文件）
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server
--port 8080
--inline --content-base ./build"
--inline加入该参数可以实现自动刷新，
在当前目录执行 npm run dev,执行完成后，在文件夹build中新建index.html，加入如下代码
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&tests&/title&
&div id="react-content"&&/div&
&script src="./bundle.js"&&/script&
在浏览器中打开
就可以实时查看效果，修改后代码后，需要刷新才能查看到效果。执行npm run build可以打包，相当于执行webpack命令
Cannot GET / 错误
是由于package.json中的
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
build文件夹不存在
配置react和babel
npm install react --save
安装babel相关组件，让webpack自动转换jsx，
npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
在webpact.config.js的module的loaders中增加相应配置
loaders: [
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
presets: ['react', 'es2015']
配置完成后，在js或jsx文件中就可以直接写jsx语法
babel编译es6和jsx
先安装babel-cli
npm install -g babel-cli
babel src -d dist --presets react,es2015
src 为源文件目录，dist为编译输出目录，--presets 预置插件
支持es7语法
es7语法分四个阶段分别对应四个插件
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
选择一个加载就能正确解析es7语法
先安装less编译器
npm install less css-loader less-loader
style-loader --save-dev
在webpact.config.js的module的loaders中增加相应配置
{test: /\.less$/,loader: "style!css!less"}
配置图片及字体文件
安装url-loader,修改webpact.config.js的module的loaders中增加相应配置
{test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}
react,babel只能安装在当前目录，安装在全局无效，提交到github时需要把这些模块排除掉
npm安装依赖
在当前目录执行npm install会根据当前目录下的package.json文件，把需要的依赖都下载安装
npm升级到3
npm install npm@3.0
浏览: 15625 次
来自: 上海
测试了一下，问题还是不小的啊，如果失去浏览器窗口失去焦点，甚至 ...(点击上方蓝字，可快速关注我们)几年前，当我写的代码被各种各样的jQuery选择器和回调函数搞得乱七八糟的时候，AngularJS把我从中解救了出来。Angular帮助我改善了开发项目的可维护性，而且提供了很多触手可得的功能，它是为建立大型web应用而生的工具，极大方便了快速开发大型应用。我还记得AngularJS的双向数据绑定和模型是唯一数据来源的哲学是怎样得让我惊叹，事实上，他们大大减少了我编写的应用的代码冗余。随着时间的推移，我发现了Angular的一些弊病，最终，我对这些缺点失望至极，于是开始寻找它的替代品。下面这些是我对Angular的忧虑。基于DOM执行。Angular的执行流程严重依赖DOM， Angular应用在默认的引导过程中会扫描DOM并按DOM中指令的优先顺序将模板编译，这样让调试和检测执行顺序变得困难。双向数据绑定是一把双刃剑。随着你的组件变得复杂，这种方式可能导致性能问题。双向绑定是如何影响到性能的呢？JavaScript (ES5)没有实现任何通知变量和对象发生变化的方法，因此Angular使用一种叫做“脏检查“的机制来跟踪数据变化并同步用户界面。任何Angular作用域内的操作都会触发脏检查，导致了随着绑定增多应用性能会降低。双向绑定的另一个问题是，页面上许多组件能够改变数据，也就意味着有很多数据的输入来源，如果不能很好管理的话，会导致混乱和难以应对的局面，但客观的说，这是个人的实现问题，并不是Angular自身问题。Angular是有它自己体系。Angular的所有操作都必须经过它的digest cycle遍历监听器，否则这些组件不能和你的数据模型同步，这也导致了它的兼容性问题。如果你还使用任何包含数据变动的第三方Js库，你需要用Angular的$apply函数包装它们，否则你就需要把它们转变成一个服务。这就好比重构每一个JS库只为它们能够和Angular相互合作。依赖注入。JavaScript目前没有包管理器或者自己的依赖解析器。AMD，UMD和CommonJS已经较好解决了这个缺陷，但是到现在Angular也没有处理好这些。当然，它引入了依赖注入(DI)，尽管如此，但客观的说，有许多非官方的依赖注入方式使用RequireJS实现。陡峭的学习曲线。使用Angular需要你学习大量的概念，并不仅仅局限于以下：模块(modules)控制器(controllers)指令(directives)作用域(scopes)模板(templating)连接函数(link functions)过滤器(filters)依赖注入(dependency injection)所以初次接触Angular是非常困难的，它不适合胆小鬼。所有的这些致使我开始转向React。React好在哪？React是最新的开源UI框架，是构建JavaScript应用的新方式，React由Facebook和Instagram领导。要清楚地是：React并不是像AngularJS那样的应用开发框架，所以把它们作为同类比较是不公平的。当React在2013年5月的欧洲JSConf被介绍于众时，参会者被它的一些概念深深震撼，比如“单方向的数据流”和“虚拟DOM”。React用于构建UI界面，引用一句来自官方网站的话说，“人们使用React作为MVC中的View”。但是，你可以用它编写独立的Web组件，多多少少类似Angular的directives。React重新思考了我们当今的web发展观和最佳实践。比如，它鼓励单向数据流动，相信组件是被数据驱动的状态机的哲学。尽管大多数类似框架喜欢直接操作DOM，React却讨厌DOM并尽力避免开发者与DOM打交道。React提供了尽可能少的API去实现一个UI组件，既没有多余，有没有不足之处。它遵循了UNIX的哲学：小即是美。做一件事就要做到极致。这里有一篇更详尽的关于Angular和React间的比较的文章，来自于就职Facebook/Instagram的Pete Hunt。为什么我转向了React?下面列出了React中我喜欢的几个方面。React速度很快跟其他框架相比，React使用不同的方式访问DOM。它并不让你直接操作DOM，而是在JavaScript代码逻辑和实际DOM间引进了一个叫做“虚拟DOM”的层。虚拟DOM提高了web性能，对于连续的渲染过程，React在虚拟DOM中得到前后发生的变动(diff)，之后只在真实DOM中改变那些需要改变的地方。很好的浏览器兼容性虚拟DOM解决了跨浏览器的兼容问题，因为它提供了一套支持IE8以上标准的API模块性编写独立的UI组件让你的应用模块化，可以让你把出现的问题限制在有这个问题的模块上。每一个模块都可以被单独开发、测试，并且能够调用其他组件，这相当于提高了项目的可维护性。单向数据流更合情合理Flux是在JavaScript应用中创造单向数据层的系统架构，这个概念和React视图库由Facebook一同提出的，Flux的出现让开发大型应用变得更加简单。Flux只是一个概念而不是特定工具的实现，它可以成为其他框架的一部分，例如，Alex Rattray有一个不错的Flux的实现：在React中使用Backbone的集合和模型。纯JavaScript现在的web app跟传统的Web相比工作方式已经不同了，比如视图层通过与用户的交互改变内容而不是请求服务器，因此视图和控制器需要紧密相互依赖。其他一些框架使用Handlebars或Mustache那样的模块引擎处理视图层，但是React认为视图层和控制器相互依赖非常密切以至它们应该共存一处而不是使用第三方模板引擎，当然，最重要的是不要离开JavaScript的作用域。同构JavaScript单页JS Web应用的最大的缺点是在搜索引擎抓取数据时的限制。React对此有一种解决办法。React可以在将数据传给客户端前在服务器上预先渲染应用，这样可以从服务器上渲染好的静态数据还原真实应用的相同状态。因为搜索引擎爬虫抓取数据依靠服务器的响应而不是JavaScript的执行结果，所有预先渲染可以改善你的SEO与其他库兼容良好在构建大型应用的时候，像RequireJS, Browserify和Webpack那样的加载器和打包工具是十分有用的，它们让艰难的任务得以完成。不幸的是，目前版本的JavaScript并不提供用于加载和打包的模块(不过有提议在即将到来的ES6版本中加入System.import)幸运的是，我们拥有像RequireJS和Webpackz这样简洁的代替品， React就是用Browserify构建的，如果你想注入图像资源或者编译Less和CoffeeScript，Webpack或许是一个更好的选择，更重要的是，你完全可以实现这个选择。使用React，我还需要其他开发框架吗使用React可以构建用户界面，但是你仍需要发起AJAX相应，使用数据过滤器或者其他Angular包含的功能。那么我们是否需要使用额外的JavaScript开发框架？为什么我们抛弃Angular？框架就是一套模块和规则，如果我不需要其中一些模块或者想把一个模块替换成另一个更优秀的模块，我该怎样做?其中一种实现模块化和依赖管理的方法就是通过包管理器。但是，我怎么才能在Angular里管理包呢？这都取决于你，但是你要知道Angular有它自己的体系，你很可能需要改编第三方包使其适应Angular的体系。换句话说，React就是纯净的JavaScript，任何用JavaScript编写的第三方包不需要任何包装就可以使用。对我来说，使用npm、Bower这样的包管理器是很好的选择，我们可以挑选自的己组件和工具集。但需要明确的是：这比使用像Angular这样的综合性开发框架更复杂。这一方面，它的好处是React鼓励使用npm，这样就拥有了许多现成的包可以使用，当你开始用React构建app，你可以使用其中一个全栈初学者工具包。转换到React并不是轻松的因为Angular是一款app开发框架，它的确带给我很多好处，但我还是我放弃了一些非常棒的功能，比如将封装好的AJAX用于$http服务，使用$q作为promise服务，用ng-show,ng-hide,ng-class和ng-if作为模板控制语句——所有这些都令人惊叹。React并不是一款app开发框架，所以你需要考虑构建应用的其他方面，比如，我正从事一款叫做react-utils的开源项目，以此用来简化React开发。社区也正在积极地贡献类似的可重用组件来填补这个空白，React Component就是一个非官方目录网站，你可以从中寻找这样的开源组件。React的哲学并不鼓励你使用双向绑定，这会让你处理表单和可编辑的数据格时带来了很多困苦。但是，但你开始理解Flux数据流动和存储的时候，一切都变得清晰简易。React是新兴的，它的社区需要时间成长，而另一方面Angular已经得到极大流行，有相当多的拓展可以使用(比如AngularUI 和 Restangular)。然而，尽管React的社区刚刚兴起，但它成长迅速，像React Bootstrap这样的拓展可以证明，所以我们拥有更多的组件使用只不过是一个时间问题。结论如果你喜欢Angular方式，你可能一开始讨厌React，主要是因为React的单向数据流和它缺乏开发应用的特性。但是一旦你开始适应了Flux设计模式和React的哲学，我保证你将会发现它的美丽之处。Facebook和Instagram都在使用React(因为是它们领导在React)。GitHub’s新的源码编辑器Atom就是用React构建的。即将到来的新Yahoo!邮箱正在用React构建。React已经取得大规模的app和大科技公司的关注。原文出处：译文出处：伯乐在线 - 郭祥链接：/82586/【今日推荐↓】微信号：FrontDev（长按上图，弹出“识别二维码”后可快速关注）『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯，相关职位。欢迎关注。微信号：iProgrammer(长按上图，弹出“识别二维码”后可快速关注)「程序员的那些事」是最受欢迎的程序员、IT 技术和 IT 行业相关的微信公众号之一，分享最新编程技术、经典技术分享、IT 行业动态、热门编程课程、高薪技术职位、程序员的日常，更有难得一见的 IT 相亲活动。/all-posts/点击“阅读原文”，查看更多 前端 精彩文章。↓↓↓程序员的那些事(iProgrammer)　
　文章为作者独立观点，不代表大不六文章网立场
iProgrammer最有影响力的程序员自媒体，关注程序员相关话题：IT技术、IT职场、在线课程、学习资源等。热门文章最新文章iProgrammer最有影响力的程序员自媒体，关注程序员相关话题：IT技术、IT职场、在线课程、学习资源等。&&&&违法和不良信息举报电话：183-
举报邮箱：
Copyright(C)2016 大不六文章网
京公网安备78}