babel

I use babel-eslint to lint/fix my code. Worked great until I wanted to adopt some ES2017 async await found overhere . I changed my React app accordingly, allbeit slightly different: The relevant part of my index.js: async function renderApp() { const store = await configureStore() const history = syncHistoryWithStore(browserHistory, store, { selectLocationState: state => state.get('routing') }) ReactDOM.render( <AppContainer> <MuiThemeProvider muiTheme={muiTheme}> <Provider store={store}> <Router history={history} routes={routes(store)} /> </Provider> </MuiThemeProvider> </AppContainer>,

babel篇 在package.json中添加--exec babel-node 如果需要编译es6，我们需要设置presets包含 es2015 ，也就是预先加载es6编译的模块。 如果需要编译es7，我们需要设置presets包含 stage-0 ，也就是预先加载es7编译的模块。 npm install babel-cli -g npm install babel-core -g npm i babel-preset-es2015npm i babel-preset-stage-0 然后在.babelrc文件中加上，stage-0可以缺省 "presets": ["es2015","stage-0"] 来源： https://www.cnblogs.com/ToBeBest/p/11691435.html

1、产生原因：项目不支持装饰器 2、解决方法： 　　2.1 执行 yarn 　　安装完整依赖； 　　2.2 如果依赖时yarn.lock变化了，并且项目有git目录，则将提示的文件提交到git仓库　　 ? Are you sure you want to eject? This action is permanent. Yes This git repository has untracked files or uncommitted changes: yarn.lock 　　 　　2.3 执行： yarn eject 　　 　　2.4 执行 yarn add @babel/plugin-proposal-decorators 　　安装装饰器驱动 　　2.5 将package.json中的babel依赖修改为： "babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ], "presets": [ "react-app" ] }, 　　 　　2.6 执行项目即可。 yarn start 　　 来源： https://www.cnblogs.com/weizhxa/p/11691004.html

【gulp】配置es6转es5 先安装node，然后来到项目根目录 安装gulp npm install gulp 初始化一下 npm init -y 安装babel npm install --save-dev gulp-babel babel-core 安装 ES6 转换成 ES5 插件 npm install --save-dev babel-preset-es2015 在项目根目录创建文件 .babelrc ，内容 { "presets": ["es2015"] } 配置gulp：在根目录中创建一个gulpfile.js，内容 const gulp = require('gulp'); const babel = require("gulp-babel"); //es6转es5 gulp.task("ese", function () { return gulp.src("src/*.js")// ES6存放路径 .pipe(babel()) .pipe(gulp.dest("dist")); //转换成 ES5 后存放的路径 }); // 监视src文件变化，自动执行任务 gulp.task('watch', function () { gulp.watch('src/*.js', gulp.series("ese")); }) gulp.task('start'

Babel 是怎么工作的 Babel 是一个 JavaScript 编译器。 做与不做 注意很重要的一点就是， Babel 只是转译新标准引入的语法，比如： 箭头函数 let / const 解构 哪些在 Babel 范围外？对于新标准引入的全局变量、部分原生对象新增的原型链上的方法，Babel 表示超纲了。 全局变量 Promise Symbol WeakMap Set includes generator 函数 对于上面的这些 API， Babel 是不会转译的，需要引入 polyfill 来解决。 Babel 编译的三个阶段 Babel 的编译过程和大多数其他语言的编译器相似，可以分为三个阶段： 解析（Parsing）：将代码字符串解析成抽象语法树。 转换（Transformation）：对抽象语法树进行转换操作。 生成（Code Generation）: 根据变换后的抽象语法树再生成代码字符串。 为了理解 Babel ，我们从最简单一句 console 命令下手 解析（Parsing） Babel 拿到源代码会把代码抽象出来，变成 AST （抽象语法树），学过编译原理的同学应该都听过这个词，全称是 Abstract Syntax Tree 。 抽象语法树是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，只所以说是抽象的

1、html-webpack-plugin Simplifies creation of HTML files to serve your webpack bundles. 主页地址： https://github.com/jantimon/html-webpack-plugin 安装方法： npm i --save-dev html-webpack-plugin 2、extract-text-webpack-plugin Extracts text from a bundle into a separate file. 主页地址： https://github.com/webpack-contrib/extract-text-webpack-plugin 安装方法： npm install --save-dev extract-text-webpack-plugin 3、style-loader Adds CSS to the DOM by injecting a <style> tag. 主页地址： https://github.com/webpack-contrib/style-loader 安装方法： npm install style-loader --save-dev 4、css-loader The css-loader interprets @import and

第一种方法： 直接在html中加入js链接： <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> 或者： <script type="text/javascript" src ="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script> 第二种方法（推荐）： 1、npm install --save-dev babel-polyfill 2、在main.js中引入： import “babel-polyfill” 来源： https://www.cnblogs.com/wiliam/p/11678156.html

可以简单使用 https://www.npmjs.com/package/create-component-lib 这个npm进行发布 该包的具体的实现方式 https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b 该教程中更正点 1. npm install --save-dev @babel/core @babel/cli @babel/preset-env 我只安装@babel/cli的时候npm run build 会失败 2. npm publish 如果要删除你发布的包 npm unpublish name@version 来源： https://www.cnblogs.com/luguiqing/p/11677600.html

Electron + React + Node.js + ES6 开发桌面软件 1、概述 近来工作上需要做一款 PC 上的软件，这款软件大体来讲是类似 PPT 的一款课件制作软件。由于我最近几年专注于移动 App 的开发，对 PC 端开发的了解有些滞后。所以我首先需要看看，在 PC 上采用什么框架能够顺利完成我的工作。 我的目标是，在完成这款软件的同时能够顺便学习一下比较流行的技术。在经过前期技术调研后，我明确了实现这款软件所需要的技术条件： 不采用 C++ 方面的类库，比如 MFC、Qt、DuiLib 等等； 本来想试试 C# 来开发，但 C# 对我来说，需要从头学习，如果学 C# 只为了开发这一款软件，后续再无用武之地，那么对我来说，学习的驱动力不大； 之前学习了移动端的开发库 React Native ，所以对 React 组件化的开发方式颇有好感，所以想尝试用 React 来开发。 2、技术路线 基于以上几点考虑，我通过搜索了解了 Electron 这个框架，果断采用了下面的技术路线： Technical 用途 文档官网 Electron 包装 HTML 页面，为网页提供一个本地运行环境 http://electron.atom.io/docs/ React 用 React 组件来写页面 https://facebook.github.io/react/ Node.js 为