babel

1、先全局安装babel-cli,输入命令 npm install babel-cli -g 2、输入 cd d:\es6 ; ---进入文件夹路径 3、输入 npm init ； 一路回车键 ---（引导你创建一个package.json文件，包括名称、版本、作者这些信息等） 4、输入 npm install --save-dev babel-cli ； ---（安装命令行转码babel-cli工具） 5、es6文件里新建配置文件.babelrc 复制代码 { "presets": [], "plugins": [] } 粘贴到.babelrc 里 6、命令行窗口输入 npm install --save-dev babel-preset-es2015 ；---（安装es2015依赖项） 将"es2015"加入.babelrc { "presets": ["es2015", "react", "stage-0"], "plugins": [] } 7、输入 babel -h 检测是否安装成功 8、将es6编译成es5 例如： babel es6.js -o es5.js 9、压缩代码 sudo npm install uglify-js -g ： 压缩代码 uglifyjs es5.js -o es5-min.js /*--> */ /*--> */ 来源： https:/

vue打包谷歌项目可以打开，其他浏览器不行 一般我们使用谷歌浏览器开发，但是打包dist,上线时出现问题就是谷歌浏览器访问，没问题360浏览器，QQ浏览器等浏览器在打开发送时候报错，这里以QQ浏览器为例子： 原因是谷歌浏览器可以解析ES6语法，但是其它浏览器暂时支持ES5语法，这样怎么解决呢 通过下载babel-ployfill解决，vue中webpack框架运行代码： npm install babel-ployfill --save 在main.js导入,即可 import 'babel-ployfill' 来源： https://www.cnblogs.com/xujunkai/p/12326777.html

前言 preset与plugin的关系: preset中已经包含了一组用来转换ES6+的语法的插件,如果只使用少数新特性而非大多数新特性,可以不使用preset而只使用对应的 转换插件 babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的 转换插件 或者 polyfill 例如，默认情况下babel可以将 箭头函数 ， class 等语法转换为ES5兼容的形式，但是却不能转换 Map ， Set ， Promise 等新的全局对象，这时候就需要使用 polyfill 去模拟这些新特性 1. 使用转换插件: babel-plugin-transform-xxx 使用方法 缺啥补啥,在 package.json 添加所需的依赖 babel-plugin-transform-xxx 在 .babelrc 中的 plugins 项指定使用 babel-plugin-transform-xxx 插件 代码中不需要显式 import/require , .babelrc 中不需要指定 useBuiltIns , webpack.config.js 中不需要做额外处理,一切由babel插件完成转换 优点 作用域是模块,避免全局冲突 是 按需 引入,避免不必要引入造成及代码臃肿 缺点 每个模块内单独引用和定义polyfill函数,造成了重复定义,使代码产生冗余

vex使用...mapActions报错解决办法 vuex2增加了mapGetters和mapActions的方法，借助stage2的Object Rest Operator 所在通过 methods:{ ...mapActions([ 'increment' ]) } 酱紫去拿到action。但是我们需要安装babel-preset-stage-2的依赖。 可以使用babel插件， 该插件为 babel-plugin-transform-object-rest-spread 使用方法： npm install --save-dev babel-plugin-transform-object-rest-spread 新建.babelrc配置文件（切记不要忘记！！！） { "plugins": ["transform-object-rest-spread"] } 谢谢大家！！！ 来源： https://www.cnblogs.com/maqingyuan/p/9284916.html

在使用vuex2的mapGetters 和 mapActions 的方法时，借助 stage2 的 Object Rest Operator 特性,可以写出下面代码： computed: { ...mapGetters([ // … 三个点，在框架语言里，就是传对象 'hadChannels', 'currentChannel' ]) } 　　 但是在借助babel编译转换时发生了报错： BabelLoaderError: SyntaxError: Unexpected token 。 搜索一番，结果是babel 没有解析成功，看来是 babel的配置为问题 原来的 .babelrc { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"] } 　　 解决方案 接着在babel的issues中搜索这样的报错，原来是我babel预置的转换器是 babel-preset-es2015 ，并不能转换 Object Rest Operator 特性。 1. 安装 Object Rest

先贴上报错： vuex2增加了mapGetters和mapActions的方法，借助stage2的Object Rest Operator 所在通过 methods:{ ...mapActions([ 'increment' ]) } 酱紫去拿到action。但是我们需要安装babel-preset-stage-2的依赖。 解决方案： 在package.js里面增加"babel-preset-stage-2": "^6.1.18", 然后npm i 安装依赖 接下来在.babelrc 配置 { "presets": [ ["es2015", { "modules": false }] ], "plugins": ["transform-object-rest-spread"] } 最后，我想说 从网上查阅资料得知babel-preset-stage-2中已包含babel-plugin-transform-object-rest-spread插件（es6的对象展开符插件），但是不知怎么还是没有解决此问题， 因此我在package.json里 npm install babel-plugin-transform-object-rest-spread --save dev, 我的项目中.babelrc文件是这样配置的： 然而，我却成功解决了此问题。。。 欢迎大神来告知一二！！！ 来源：

报错信息： ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/components/header.vue Module build failed: SyntaxError: F:/web/tabs/app/components/header.vue: Unexpected token (32:7) 原因： 解决： npm isntall --save-dev babel-preset-stage-3 　　 修改.babelrc配置 { "presets": ["es2015", "stage-3"] } 　　 代码中 import {mapGetters} from 'vuex' export default { data(){ return { } }, computed:{ ...mapGetters([ 'isMain' ]) }, methods:{ } } 　　 来源： https://www.cnblogs.com/laneyfu/p/11220674.html

关于 Babel 如果我们没有配置一些规则，Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign ）都不会转码。 所以，当这样的代码出现时： const key = 'babel' const obj = { [key]: 'foo', } Babel 默认会编译成下面的代码 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var key = 'babel'; var obj = _defineProperty({}, key, Object.assign({}, { key: 'foo' })); 我们可以看到代码中多了一个名为 _defineProperty 的帮助函数

引言 　　最近React作为当前最为火热的前端框架。最近也相继而出来相关ES7的新语法。 　　当然，在使用React开发web项目的时候，不得不提到的就是与之配套的相应的打包技术，之前上文已经简单的提到React+webpack的相关环境搭建。 　　不过昨天，在技术群聊里，又有人提到，如何更好的利用webpack进行开发与打包。那么今天，我就用一个例子来解释一下，利用webpack来打包react项目与发布的相关配置（包含Request请求和React-router的路由跳转哦）。 准备工作 　　当然需要安装WebStrom和node.js啦~至于下载地址，请看上文： React+Webpack+ES6环境搭建(自定义框架) 让我们跑起来吧 　　首先来说说，本项目基本用到的一些开发组件(package.json)： 开发中需要用到的，我全部放在devDependencies(npm install ...... --save-dev)中; 项目中有用到的组件，我全部放在dependencies(npm install ...... --save)中; "devDependencies": { "babel-core": "^6.18.2", "babel-loader": "^6.2.8", "babel-polyfill": "^6.16.0", "babel-preset