babel6升级到babel7

一、Babel 7 库的作用域 (scope)

（1）Babel 7 用了 npm 的 private scope，把全部的包都挂在在 @babel 下，类似的有 typescript 的 @type。

（2）Babel 7 提供多种配置

.babelrc
babel.config.js
webpack babel loader

二、babel7 相关文件

先看一下babel7配置成功后的样子

babel.config.js

const presets = [['@babel/env',{targets: {edge: '17',firefox: '60',chrome: '67',safari: '11.1',browsers: ['last 2 versions', 'ie >= 7']}}]
]
module.exports = { presets }

babel 7 开始, .babelrc 的作用范围仅限于当前项目，默认不再作用与 node_modules 和工作区 (./packages/*)，如果需要，可以指定作用范围

在项目 rootDir(项目根目录）创建 babel.config.js。

.babelrc

{"presets": [["@babel/env",{"targets": {"chrome": "58","ie": "10"},"useBuiltIns": "usage"}]],"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-object-rest-spread","transform-vue-jsx"]
}

package.json

三、升级步骤

(1)babel-core卸载掉，从新安装@babel/core

npm un babel-corenpm i -D @babel/corenpx babel-upgrade --write --install

（2）.babelrc 引入插件解析

"plugins": [ "@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-object-rest-spread", "transform-vue-jsx" ]

(3)在package.json文件中删除babel6 相关的依赖
在

"devDependencies":{}"dependencies":{}

中看后面是有babel 版本号写6.XX.XX的都删掉

(4)删除文件夹 node_module 然后重新安装

rm -rf node_modules
yarn install

babel6升级到babel7相关推荐

为什么我要构建这个脚手架
本文不是什么技术性介绍文章,准确地说算是自己的成长记录吧.刚参加工作时,组里使用的脚手架是由 leader 使用 webpack, gulp 搭建的多页面应用脚手架 fex.当时只需知道怎么使用就行了 ...
babel-预设和插件
一.配置文件几乎所有的前端工程师都知道可以用babel将es6+的语法转换为es5,转换工具要么使用babel-cli,要么使用webpack的babel-loader,不管使用哪种转换工具,通常都 ...
react 与 Vue的一些比较
原文地址组件开发特性对比众所周知,Vue和React都有那么一个特性,那就是可以让我们进行组件化开发,这样可以让代码得到更好的重用以及解耦,在架构定位中这个应该叫纵向分层吧.但是,两个框架开发组 ...
babel6和babel7中关于polyfill和preset-env和babel-plugin-transform-runtime等总结
记录自己零散的收获,随笔. 一些基础 babel的作用是转换JS新的特性代码为大部分浏览器能运行的代码. babel转码又分为两部分,一个是语法转换,一个是API转换. 对于API的转换又分为两部分, ...
babel5升级到babel6总结
babel5 to babel6 为什么要升级? 性能提升:据说compile速度提升20%(但在测试后发现,速度慢了20%+). 可配置的插件:更强的灵活性,以及更简单的插件API. 更简洁的配置. ...
babel7 + corejs3升级
webpack.config.js中,移除以往的babel引入 entry: {// app: ['babel-polyfill', path.join(process.cwd(), 'src/mai ...
babel6 babel7_当您已经准备好Babel时设置Flow
babel6 babel7 by Jamie Kyle 杰米·凯尔(Jamie Kyle) 当您已经准备好Babel时设置Flow (Setting up Flow when you've alrea ...
系统架构升级要不要上微服务？历“久”弥新微服务——你真的需要升级微服务架构吗
在 <微服务架构设计模式> 一书中,作者总结了关于微服务的一些"重点",原文如下: 中国企业和开发者对微服务架构的热情让我印象深刻.但如同我给所有客户的忠告一样,我想对 ...
使用rancher对Docker容器服务升级
这是笔者以前使用到的一个docker管理工具--rancher 升级服务的步骤记录一下,说不定有人需要或者以后能用上呢? 1.打包好后上传服务器,编写Dockerfile FROM jdk8apli ...

babel6升级到babel7

一、Babel 7 库的作用域 (scope)

二、babel7 相关文件

三、升级步骤

babel6升级到babel7相关推荐

最新文章

热门文章