Nuxt 2.3.X 配置babel
1. 在package.json中修改运行脚本
添加--exec babel-node
添加之后的效果为:(修改了8/10行)
{
"name": "nuxt-learn",
"version": "1.0.0",
"description": "My lovely Nuxt.js project",
"author": "wqzhai",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^5.2.0",
"element-ui": "^2.4.6",
"koa": "^2.5.2",
"nuxt": "^2.0.0"
},
"devDependencies": {
"nodemon": "^1.11.0"
}
}
2.安装编译工具
npm i babel-cli // 这是babel解释器的客户端主程序
npm i babel-core // babel的核心文件,好像默认会自动安装
npm i babel-preset-es2015 // 把代码转换成ES6
npm i babel-preset-stage-0 // 把代码转换成ES7
3.在根路径创建.babelrc文件,写入配置
.babelrc
{
"presets": ["es2015","stage-0"]
}
4.重新启动项目即可
Nuxt 2.3.X 配置babel的更多相关文章
- 配置babel
配置babel ECMAScript的版本,每年都会定期举行会议,发布各种标准,当前版本到了2019,但大部分人使用的浏览器,都可以支持es2015,也就是es6,要等到大部分浏览器都支持到最新版本, ...
- 【02】webstorm配置babel转换器+截图(by魔芋)
[02]webstorm配置babel转换器+截图(by魔芋) [02]魔芋的安装过程 01,配置babel. 02,用webstorm.注意webstorm的版本号. 03,使用 ...
- webpack.config.js====配置babel
参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...
- [转] webpack中配置Babel
一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...
- babel-plugin-import配置babel按需引入antd模块,编译后报错.bezierEasingMixin()
用create-react-app做项目的时候,同时引入了antd,为了实现按需加载antd模块,用到他们提供的 babel-plugin-import ( 一个用于按需加载组件代码和样式的 ba ...
- webpack中配置Babel
Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...
- webstorm配置babel自动转译es6的方法
1.npm安装babel npm install -g babel-cli 2.npm安装Babel的preset npm install --save-dev babel-preset-es2015 ...
- nuxt.config有关router配置
这里只说明一个属性,其他属性移步官方文档 https://zh.nuxtjs.org/api/configuration-router extendRoutes 官方说明: 你可以通过 exten ...
- 基于webpack实现多html页面开发框架五 开发环境配置 babel配置
一.解决什么问题 1.开发环境js.css不压缩,可在浏览器选中代码调试 2.开发环境运行http服务指向打包后的文件夹 3.babel输出浏览器兼容的js代码 二.需要 ...
随机推荐
- spoj2142 Arranging Flowers
传送门 题目大意 给你n和m,表示一个n*n的数独已经填完了m行,让你填出剩下几行,要求答案的字典序最小. 分析 看到这道题我首先想到的是记录每行每列使用了哪些数字,然后贪心的来填,但是发现用这种策略 ...
- WOJ 10 精英选拔
神仙dp,膜Claris 题意:给一个长度为$n$的数列,求出不超过k次交换后的最大连续子区间和. 发现交换后的最优答案一定是这样的(0和2的长度可以为0) 0 ...
- oracle数据库之多表查询二
多表查询解题思路: 1.分析题目要查询的结果涉及到那几张表 2.将每张表建立关联条件,否则会产生笛卡尔积 3.分清楚查询的条件,然后使用and将条件链接 4.涉及到分组查询的需要使用聚合函数 5.分组 ...
- undefined reference to `clock_gettime
下面这个错误通常是因为链接选项里漏了-lrt,但有时发现即使加了-lrt仍出现这个问题,使用nm命令一直,会发现-lrt最终指向的文件没有包含任何symbol,这个时候,可以找相应的静态库版本libr ...
- ubuntu基础知识与技巧
root用户与超级用户的切换 (1) sudo -i (2) sudo su (3) su root 安装升级 查看软件xxx安装内容 dpkg -L xxx 查找软件库中的软件 apt-cac ...
- POJO 与 JavaBean 的区别 !
$说明: POJO :全称(Plain Old Java Object)翻译为“普通旧Java对象” 通俗理解为“一个简单的java对象”. JavaBean: 是一种JAVA语言写成的可重用组件,是 ...
- ubuntu - 14.04,由于安装软件造成磁盘空间不足,无法登入Gnome解决办法!!
刚才安装了半天软件,最后出现磁盘空间不足的问题,刚开始我还以为ubuntu和我开玩笑,随后我重新启动它才发现真不是开玩笑,我已经进不去Gnome桌面了!!! 解决办法: 1,以root身份进入shel ...
- multiset的应用
multiset 和set差不多 ,但是可以存储多个一样的元素
- vue框架搭建的详细步骤之项目结构(二)
上一篇中简单的创建了一个脚手架,这篇简单的讲一下脚手架的项目结构: (1).build/ 此目录包含开发服务器和生产webpack构建的实际配置.通常,您不需要触摸这些文件,除非您要自定义We ...
- ECMAScript 6 一些有意思的特性
主要参考了下面两篇博文,对ES6的新特性做一些笔记,加深印象 ES6新特性概览 - 刘哇勇 - 博客园 es6快速入门 - _marven - 博客园 *号函数 迭代函数生成器 我能想到的生成器使用场 ...