Webpack2 入门踩坑教程(五)
来源:互联网 发布:cr2什么软件打开 编辑:程序博客网 时间:2024/05/17 23:55
注:非原创,原文来自:http://blog.csdn.net/alanfancy/article/details/64444204
本人通过此链接博客学习,并在此基础上增加自己的想法。
上节Webpack2 入门踩坑教程(四):http://blog.csdn.net/echo601/article/details/76195411
五.使用babel对es6/es7转码
1:安装babel核心模块
npm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 –save-dev
各模块的作用如下:
"babel-core" //转换器 "babel-loader" //转换器的加载器 "babel-preset-es2015" //ES2015转码规则 "babel-preset-stage-0" //es7支持,ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个stage-0,stage-1,stage-2,stage-3
2:在项目文件添加.babelrc文件,加入转码规则
可以使用命令行的方式添加.babelrc文件,在git bash下,输入 touch .babelrc
命令即可创建(windows自带命令行无效)
在.babelrc文件中输入以下信息(转码规则):
{ "presets":["es2015","stage-0"]}
3:修改webpack.config.js文件,添加loaders模块设置
这里一定要注意!添加loader的方式要这样写,我之前写成和我学习的那个博文一样,报错得一塌糊涂,看了官方文档才发现已经改了,要写成下面这样:
module.exports = { entry: entry, plugins: plugins, module: { loaders: [{ test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015'] } }] }, output: { path: path.join(__dirname, 'dist'), // 指定打包之后的文件夹 publicPath: '/dist/', // 指定资源文件引用的目录 filename: 'bundle.js' // 指定打包为一个文件 bundle.js }}
4:在index.js中添加es6格式的方法
var messages = require('./messages');var newMessage = () => ('<p>' + messages.hi + ',' + messages.event + "</p>");var app = document.getElementById('app');app.innerHTML = newMessage();if(module.hot) { //启用热重载 module.hot.accept();}
5:命令行运行npm run dev测试,并修改数据验证程序。
阅读全文
0 0
- Webpack2 入门踩坑教程(五)
- Webpack2 入门踩坑教程(一)
- Webpack2 入门踩坑教程(二)
- Webpack2 入门踩坑教程(三)
- Webpack2 入门踩坑教程(四)
- Webpack2 完整踩坑教程(五)
- Webpack2 完整踩坑教程(五)
- Webpack2 完整踩坑教程(一)
- Webpack2 完整踩坑教程(二)
- Webpack2 完整踩坑教程(三)
- Webpack2 完整踩坑教程(四)
- Webpack2 完整踩坑教程(六)
- Webpack2 完整踩坑教程(七)
- Webpack2 完整踩坑教程(八)
- Webpack2 完整踩坑教程(九)
- Webpack2 完整踩坑教程(十)
- Webpack2 完整踩坑教程(十一)
- Webpack2 完整踩坑教程(十二)
- MS SQL SERVER 清理数据库日志脚本
- 【Android】Android Studio导入原生Launcher编译成功
- Redis学习一(简介与安装)
- Mybatis 中$与#的区别
- 1017.A除以B (20)
- Webpack2 入门踩坑教程(五)
- mysql基础
- AttributeError: module 'scipy.sparse' has no attribute 'linalg'
- Redis 脚本命令
- 将存放在sourceFilePath目录下的源文件,打包成fileName名称的zip文件,并存放到zipFilePath路径下
- POST提交数据时四种常见的数据格式
- Kerbero协议
- Linux安装oracle数据库(静默模式)
- 提取文档中的指定内容