babel

当前ECMAScript的版本，每年都会定期举行会议，发布各种标准，当前版本到了2019，但大部分人使用的浏览器，都可以支持es2015，也就是es6，要等到大部分浏览器都支持到最新版本，这样需要一段很长的时间，那么要用到最新的语法特性，就需要使用转换工具，将最新的语法特性，尽可能转换为主流的语法版本代码，如果不能转，那就只能不支持了，而babel就是这样的转换工具。 配置babel，需要用到几部分： 依赖的库 .babelrc文件 npm install --save-dev babel-core babel-preset-es2015 babel-preset-stage-2 npm install --save-dev babel-register babel-polyfill npm install --save-dev babel-plugin-transform-runtime babel-core: 对语法进行转换 babel-preset-2015 babel-preset-stage2: 转换的目标代码为es6 stage2 babel-register: 改写require，在加载时对代码进行转换 babel-polyfill: 对内部API进行转码，因为有些API是不支持的 babel-plugin-transform-runtime

How would you go about internationalizing a Google App Engine webapp application using BABEL ? I am looking here for all the stages: Marking the strings to be translated. Extracting them. Traslating Configuring your app to load the right language requested by the browser 1) use _() (or gettext()) in your code and templates. Translated strings set in the module globals or class definitions should use some form of lazy gettext(), because i18n won't be available when the modules are imported. 2) Extract all translations using pybabel. Here we pass two directories to be scanned: the templates dir

1. 什么是Flow? Flow 是javascript代码的静态类型检查工具。它是Facebook的开源项目(https://github.com/facebook/flow)，Vue.js(v2.6.10的源码使用了Flow做了静态类型检查。因此我们现在先来了解下Flow的基本知识，有助于我们分析源码。 2. 为什么要用Flow？ javascript是弱类型语言，弱类型体现在代码中的变量会根据上下文环境自动改变的数据类型。那么这种弱类型有优点也有缺点，优点是我们容易学习和使用，缺点是：开发者经常因为赋值或传值导致类型错误。造成一些和预期不一样的结果。在代码编译的时候可能不会报错，但是在运行阶段就可能会出现各种奇怪的bug。因此在大型项目中我们有必要使用Flow来做代码静态类型检查。 下面我们从一个简单的demo说起。比如如下代码： function add (x) { return x + 10; } var a = add('Hello!'); console.log(a); // 输出：Hello!10 如上代码，x这个参数，我们在add函数声明的时候，其实我们希望该参数是一个数字类型，但是在我们代码调用的时候则使用了字符串类型。导致最后的结果为 "Hello!10"; 为什么会出现这种结果呢？那是因为 加号(+)在javascript语言中，它既有作为数字的加运算符外

1使用npm安装 npm i mocha chai -D chai验证方法 前两种BDD，行为驱动开发是一种敏捷软件开发的技术，引导和关注行为和规范 BDD （ 灰盒测试、黑盒测试 ） 后面一种TDD，测试驱动开发 https://www.chaijs.com/ Selenium 用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中 2.直接使用mocha测试显示在终端 先在pageage.json里面添加 3.安装mochawesome 可以生成测试报告 npm i mochawesome -D 　　 也可直接在pageconfig.js 里面 简单js测试方式，js写法 es6语法 mocha不支持es6语法要安装babel转译 npm i @babel/cli @babel/core @babel/preset-env @babel/register -D 　　 添加.babelrc文件 { "presets": ["@babel/preset-env"] } 　 配置package.json 注：如果使用到mochawesome则可以生成报告，如果不使用可以直接去掉 "scripts": { "test": "mocha --reporter mochawesome --require @babel/register test/*.js", } 　　 来源：

Using Vue (^2.0.0-rc.6) + Browserify, entry point is index.js: import Vue from 'vue' import App from './containers/App.vue' new Vue({ // eslint-disable-line no-new el: '#root', render: (h) => h(App) }) App.vue: <template> <div id="root"> <hello></hello> </div> </template> <script> import Hello from '../components/Hello.vue' export default { components: { Hello } } </script> <style> body { font-family: Helvetica, sans-serif; } </style> Hello.vue: <template> <div class="hello"> <h1>\{{ msg }}</h1> </div> </template> <script> export default { data () { return { msg: 'Hello Vue!' } } } </script>

如果写超过es5版本的js，或者ts等。是需要babel来进行编译的。 但是babel值编译，如果遇到模块化他就无能为力了 需要webpack对其进行模块化打包功能。 通常babel编译+webpack处理模块打包压缩等，挺好的。是完美的方案 但是webpack它不老实。它想牛逼，于是他就内置了不用任何配的情况下，就支持对es6的编译环节。您只管使用webpack命令，他就支持编译+模块处理打包了。但是稍微高端的就不行，比如我要编译ts等，就需要引入ts-loader了。 但是人家ts也不是吃白饭的啊，人家自己的语言 自己肯定要提供编译的cli呀。于是tsCli之tsc命令人家自己也能编译ts为浏览器或者node可运行的代码。 那也就是说 后端node开发人可以直接用tsCli或者babelCli来处理ts代码 前端因为浏览器目前2019年均不直接支持模块化，所以需要进行搭配来使用 如果您的代码是es6，且没有用模块，那么用chrome直接运行即可，无需任何处理，我自己测试了，chrome支持良好。 如果你不放心，或者还要支持其他浏览器，那么你可以用babel编译一下子，是的不推荐你用webpack，因为你没有用模块化功能，所以浪费了，webpack肯定要比babel重 若果您的代码有es6以及其模块化，那么推荐您直接上webpack，因为它既能处理es6普通语法，也能处理模块化

vue cli 3 升级到 vue cli 4 指南 官方英文升级文档，中文滞后 一. 首先，在全局安装最新的 Vue CLI： npm install -g @vue/cli # OR yarn global add @vue/cli 检查安装的版本 vue -V # 输出:@vue/cli 4.x.x 说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x ) 踩坑记录 npm install -g @vue/cli 执行成功，但是执行 vue -V 输出的还是 3.5.6 (我以前安转的版本)， 于是又重新执行 npm install -g @vue/cli ，显示成功，执行 vue -V 输出的还是 3.5.6 ， 一脸懵逼 🙄，然后重启电脑，再执行 vue -V 输出 @vue/cli 4.0.5 ，解决 😃 二. 在项目根目录下执行 vue upgrade 然后出现 提示 继续升级这些插件吗？ 输入 Y 即可. 三. 等步骤二 执行完会发现主要有 2 个文件被修改 1.文件 babel.config.js 主要是 babel 的预设由 @vue/app 改成了 @vue/cli-plugin-babel/preset 原来的 module . exports = { presets : [ '@vue/app' , // 这行 [ '@babel

This question already has an answer here: How to access the correct `this` inside a callback? 10 answers import React,{Component} from 'react'; import ReactDOM from 'react-dom'; import axios from 'axios'; import videoDetails from './components/listvideos'; class YoutubeApp extends Component { constructor(props){ super(props) this.state = { videos:[] }; this.apiCall('surfing'); } apiCall(term){ const params = { part: 'snippet', key:APP_KEY, q:term, type: 'video' }; axios.get(APP_URL, { params: params}) .then(function(response) { this.setState({ videos:response }) }) .catch(function(error) {

我们使用Babel把ES6编译成ES5 安装方法： 　　　　a. 先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist src：书写ES6代码的文件夹，写的js程序都放在这里。 dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件 　　　　 b.写一个index.html 　　　　c.在src写一个index.js 　　　　d.安装命令： 1 npm init -y 全局安装 npm install -g babel-cli 本地安装 babel - preset - es2015 和 babel - cli 　 npm install --save-dev babel-preset-es2015 babel-cli 在根目录下新建.babelrc文件，并打开写入代码　　 1 { 2 "presets" :[ 3 "es2015" 4 ], 5 "plugins" :[] 6 } 简化转换的命令（此时转换命令为 babel src / index .js - o dist / index .js ） 　　　　　　　　　 　　　　　　　　　打开package.json文件，把文件修改成下面的样子。 　　　　　　　 1 { 2 "name": "es6" , 3 "version": "1.0.0" , 4