详解webpack 配合babel 将es6转成es5 超简单实例
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈。
下面附上流程
创建个文件夹,初始化一下,首先全局安装webpack
然后安装babel
1 2 | npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader |
在当前文件夹内执行安装,然后创建两个文件夹一个src作为源文件夹,一个bin,保存生成的文件夹的列表
在src文件夹内创建一个文件app.js,里面写入现在浏览器不全支持的es6代码
然后在根目录创建一个文件名为webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | module.exports = { entry: './src/app.js' , output: { path: './bin' , filename: 'app.bundle.js' , }, module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }] } } |
然后再创建一个用于babel调用的文件,名为.babelrc
里面写入
然后在当前目录打开cmd,
运行命令 webpack
如果出现绿色的,证明成功了
然后去bin目录里面找到app.bundle.js发现里面下面会有这段代码
1 2 3 4 5 6 7 8 9 10 | function (module, exports) { "use strict" ; var a = 111; var b = 222; var xxx = function xxx(c, d) { return c * d; }; console.log(xxx(a, b)); |
证明转码成功~~~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
在JavaScript中使用严格模式(Strict Mode)
这篇文章主要介绍了在JavaScript中使用严格模式(Strict Mode),除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。,需要的朋友可以参考下2019-06-06
最新评论