webpack(三)使用 babel-loader 转换 ES6代码
查询各个 loader的使用,可以在官网上查询。
(一)安装 babel-loader,babel-core。
使用命令
npm install --save-dev babel-loader babel-core
因为ES6语法每年都在更新,因此,我们需要一定的规则去转换。
npm install --save-dev babel-preset-latest
(二)
首先按照如下层级建立相应文件
将测试用的ES6代码放在 app.js,使用CMD语法,将layer嵌入对象layer中。app.js代码如下。
import layer from './components/layer/layer.js'; const App = function () {
console.log(layer);
} new App();
layer.js代码如下
function layer(){
return{
name:'layer',
tpl:'testTpl'
};
} export default layer;
(三)webpack.config.js代码如下
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
console.log(__dirname);
module.exports = {
/*context: __dirname,*/
entry: './src/app.js', output: {
path: './dist',
filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
/*exclude: path.resolve(__dirname, 'node_modules'), //编译时,不需要编译哪些文件*/
/*include: path.resolve(__dirname, 'src'),//在config中查看 编译时,需要包含哪些文件*/
query: {
presets: ['latest'] //按照最新的ES6语法规则去转换
}
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', //通过模板生成的文件名
template: 'index.html',//模板路径
inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接 })
]
};
webpack(三)使用 babel-loader 转换 ES6代码的更多相关文章
- webpack4与babel配合使es6代码可运行于低版本浏览器
使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const ...
- webstrom如何配置babel来转换es6
网上有很多关于如何设置babel的.我学习着设置,但总差那么几步,没能满足我的需求. 我使用的是webStorm2017.1版本. babel安装准备 使用webStorm自带的filewatcher ...
- 使用babel编译器将es6代码转为es5的方法
1.首先需要安装工具 babel-cli ========= npm i babel-cli -g install 可以使用i 代替 2.安装插件 npm i --save-dev babe ...
- 深入浅出的webpack构建工具---babel之配置文件.babelrc(三)
阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel ...
- 关于webpack,babel,以及es6和commonJS之间的联系(转)
add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...
- 深入理解webpack(三) babel之配置文件
一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写 ...
- 利用babel工具将es6语法转换成es5,Object.assign方法报错
一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...
- 使用babel把es6代码转成es5代码
第一步:创建一个web项目 使用命令:npm init 这个命令的目的是生成package.json. 执行第二步中的命令后生成的package.json的文件的内容是: { "name&q ...
- Babel下的ES6兼容性与规范
前端开发 Babel下的ES6兼容性与规范 ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...
随机推荐
- 设计模式入门——Head First
设计模式是被前人发现.经过总结形成了一套某一类问题的一般性解决方案.使用模式最好的方式是:把模式装进脑子,然后在设计和已有的应用中,寻找何处可以使用它们.以往是代码复用,现在是经验复用. 从模拟鸭子游 ...
- Java IO流学习总结六:ByteArrayInputStream、ByteArrayOutputStream
类的继承关系 InputStream |__ ByteArrayInputStream OutputStream |__ ByteArrayOutputStream ByteArrayInputStr ...
- svg-edit和svg中的自定义属性
用svg的码农们肯定知道,在path.rect等元数据中会加入一些自定义属性,保存于数据库,但是用svg-edit编辑器时, 读取的时候,无法读取些这些自定义属性.解决办法:找sanitize.js文 ...
- MySQL 各种主流 SQLServer 迁移到 MySQL 工具对比
原地址:https://www.cnblogs.com/overblue/p/5796887.html Mss2sql:这个比较好用
- 2018面向对象程序设计(Java) 第2周学习指导及要求
2018面向对象程序设计(Java) 第2周学习指导及要求(2018.9.3-2018.9.9) 学习目标 适应老师教学方式,能按照自主学习要求完成本周理论知识学习: 掌握Java Applica ...
- ABAP IMPORT&EXPORT的用法
1含有事务码 1.1 不注入参数,直接调用 CALL TRANSACTION 'SUIM' AND SKIP FIRST SCREEN. 1.2 注入参数, SET PARAMETER ID: '屏幕 ...
- 目前为止最全的微信小程序项目实例
https://blog.csdn.net/zuoliangzhu/article/details/53862576#t1
- spring boot 代理(not eligible for auto-proxying)
spring 事务机制网上的案例很多,关于事务 不能回滚也有很多的类型,不同的问题有不同的处理方案,本篇博客主要介绍两种事务不能回滚的问题解决方案: 问题一: 在同一个对象中有两个方法,分别未方 ...
- Java中字节流如何转字符流,OutputStreamWriter用法
OutputStreamWriter 将字节流转换为字符流.是字节流通向字符流的桥梁.如果不指定字符集编码,该解码过程将使用平台默认的字符编码,如:UTF-8: 步骤: 1.创建流 子类对象 绑定数 ...
- 大数据入门到精通2--spark rdd 获得数据的三种方法
通过hdfs或者spark用户登录操作系统,执行spark-shell spark-shell 也可以带参数,这样就覆盖了默认得参数 spark-shell --master yarn --num-e ...