babel | 易学教程

Babel 7 - ReferenceError: regeneratorRuntime is not defined

阅读更多关于 Babel 7 - ReferenceError: regeneratorRuntime is not defined

问题 I have an application that is a node backend and a react frontend. I get the following error when i try to build/run my node application. Node: v10.13.0 Error: dist/index.js:314 regeneratorRuntime.mark(function _callee(productId) { ^ ReferenceError: regeneratorRuntime is not defined .babelrc { "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" }, } ], "@babel/preset-react"], "plugins": [ "@babel/plugin-proposal-class-properties" ] } webpack.config.js { mode: "development",

using the … spread syntax in javascript es6 named exports

阅读更多关于 using the … spread syntax in javascript es6 named exports

问题 I am attempting to import everything from a library as a hash, modify it, and re-export the modified hash, without knowing all of the named exports in a library. For example: import * as reactBootstrap from 'react-bootstrap'; wrappedReactBootstrap = doFunnyThingsTo(reactBootstrap); export { ...wrappedReactBootstrap }; // or export wrappedReactBootstrap; My understanding of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export is that the following is not allowed

Internationalization with python gae, babel and i18n. Can't output the correct string

阅读更多关于 Internationalization with python gae, babel and i18n. Can't output the correct string

jinja_env = jinja2.Environment(loader = jinja2.FileSystemLoader(template_dir),extensions=['jinja2.ext.i18n'], autoescape = True) jinja_env.install_gettext_translations(i18n) config['webapp2_extras.i18n'] = { 'translations_path': 'locale', 'template_path': 'views' } app = webapp2.WSGIApplication([ ('/', MainController.MainPageHandler) ], config=config, debug=True) In the messages.po file. "Project-Id-Version: PROJECT VERSION\n" "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n" "POT-Creation-Date: 2013-01-19 19:26+0800\n" "PO-Revision-Date: 2013-01-19 19:13+0800\n" "Last-Translator: FULL NAME \n"

Vue+webpack+Element 兼容问题总结

阅读更多关于 Vue+webpack+Element 兼容问题总结

项目中用到了Vue.js和Elenment-UI Vue官方文档中给出明确范围：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。而且Element-UI支持IE10+及大多数浏览器。由此要用到Babel，主要用于将ECMAScript 2015+代码转换为旧浏览器或环境中向后兼容的JavaScript版本。在此之前，需要先搞清楚IE6~11是否支持es5： IE6~IE8:不支持es5的所有语法; IE9:支持除ECMAScript 5 Strict Mode外的es5语法； IE10:支持es5的所有语法; IEÏ11:支持es5所有语法及es6中const和Typed Arrays新语法 babel可以把同种语言的高版本规则翻译成低版本规则，其转译过程也分为三个阶段：parsing、transforming、generating。(1)解析步骤接收代码并输出 AST(抽象语法树),这其中又包含两个阶段词法分析和语法分析。词法分析阶段把字符串形式的代码转换为令牌（tokens）流。语法分析阶段会把一个令牌流转换成 AST 的形式,方便后续操作。(2) 利用我们配置好的plugins/presets把Parser生成的AST转变为新的AST。(3

react + webpack安装配置

阅读更多关于 react + webpack安装配置

使用CDN库方式 <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> react.min.js React核心库 react-dom.min.js 提供DOM相关的功能 browser.min.js 用于将JSX语法转为javascript语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react

基于webpack接入React包安装

阅读更多关于基于webpack接入React包安装

在使用babel的项目中接入React 框架很简单，只需要加入React所依赖的Presets babel-preset-react. 安装react, react-dom, webpack 在项目根目录下执行下面命令，其中--save的含义是项目上线运行所需的包，即生产环境（--save-dev是开发环境所需的包）。 npm install react react-dom --save-dev npm install webpack --save-dev index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> /* react DOM*/ </div> <script src="bundle.js"></script> </body> </html> index.js import React, { Component } from 'react'; import { render } from 'react-dom'; render( <div>Hello React!</div>, document.getElementById('app') ); webpack-config.js

彻底解决 TypeScript 报错：“无法重新声明块范围变量”的问题

阅读更多关于彻底解决 TypeScript 报错：“无法重新声明块范围变量”的问题

背景当使用 TypeScript + TSlint + Babel + Jest 搭建开发环境时，在开发过程中偶尔会被 IDE 提示「无法重新声明块范围变量」，从而导致编译出错，报错图示如下：相关开发环境配置如下： typescript: ^3.5.3 tslint: ^5.19.0 babel: ^7.0.0 jest: ^24.9.0 ts-jest: ^24.0.2 解决方案之所以 tslint 会提示这个错误，是因为在 Commonjs 规范里，没有像 ESModule 能形成闭包的「模块」概念，所有的模块在引用时都默认被抛至全局，因此当再次声明某个模块时，TypeScript 会认为重复声明了两次相同的变量进而抛错。对于这个问题，最简单的解决方法是在报错的文件底部添加一行代码： export {} 。这行代码会「欺骗」tslint 使其认为当前文件是一个 ESModule 模块，因此不存在变量重复声明的可能性。当使用这个方法时，记得这样配置你的 tsconfig.json 文件： { "include": ["src", "demo"], "compilerOptions": { "module": "commonjs", "noImplicitReturns": true, "noUnusedLocals": true, "esModuleInterop":

webpack4 打包 library 遇到的坑

阅读更多关于 webpack4 打包 library 遇到的坑

output: { publicPath: '/', path: path.join(__dirname, 'lib'), filename: 'chart.js', library: 'tcharts', libraryTarget: 'umd', umdNamedDefine: true, }, output 中的配置，主要是 libraryTarget 和 umdNamedDefine。另外一点就是在 babel 的配置中需要添加 "sourceType": "unambiguous" 这个配置。因为 webpack4 不支持 export default 和 module.exports 混用，而我们通常在项目中使用的是 export default 的方式，而 webpack 打包的 library 是 module.exports 的方式，所以没添加这个配置时，使用 import 来加载 webpack 打包的 library 得到的是 undefined。加上这个后会通过语法进行推测，从而能正常使用。来源： https://www.cnblogs.com/3body/p/11855191.html

es6入门

阅读更多关于 es6入门

1.什么是es6 ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。 es6入门文档： http://caibaojian.com/es6/ 2.node中使用es6 Babel 是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 2.1配置文件 .babelrc Babel的配置文件是 .babelrc ，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下： { "presets": [], "plugins": [] } 2.2安装es6转换模块 presets 字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。 // ES2015转码规则 $ npm install --save-dev babel-preset-es2015 // react转码规则 $ npm install --save-dev babel-preset-react // ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个 $ npm install

webpack的总结

阅读更多关于 webpack的总结

Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源？ JS .js .jsx .coffee .ts（TypeScript 类 C# 语言） CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件（Fonts） .svg .ttf .eot .woff .woff2 模板文件 .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】网页中引入的静态资源多了以后有什么问题？？？网页加载速度慢，因为我们要发起很多的二次请求；要处理错综复杂的依赖关系如何解决上述两个问题合并、压缩、精灵图、图片的Base64编码可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；什么是webpack? webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；如何完美实现上述的2种解决方案使用Gulp，是基于 task 任务的；使用Webpack，是基于整个项目进行构建的；借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。根据官网的图片介绍webpack打包的过程 webpack官网 webpack安装的两种方式运行 npm

订阅 babel