webpack window 添加ES6支出

简介: 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。作者:张轩链接:http://zhuanlan.zhihu.com/p/20367175来源:知乎如果现在你的项目还没有对ES6的语法支持,那就有点没有逼格了,其实大家都知道这个也很简单,因为我们有伟大的Babel 首先 装各...
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:张轩
链接:http://zhuanlan.zhihu.com/p/20367175
来源:知乎

如果现在你的项目还没有对ES6的语法支持,那就有点没有逼格了,其实大家都知道这个也很简单,因为我们有伟大的Babel

首先 装各种loader


npm install babel-loader babel-preset-es2015 --save-dev

配置我们的config文件


...
      {
        test: /\.jsx?$/, loader: 'babel', include: APP_PATH, query: { presets: ['es2015'] } }, ... 

es2015这个参数是babel的plugin,可以支持各种最新的es6的特性,具体的情况看这个链接。 Babel es2015 plugin

现在我们可以改掉CommonJS风格的文件了。

sub.js


export default function() { var element = document.createElement('h2'); element.innerHTML = "Hello h2 world hahaha"; return element; } 

index.js


import './main.scss';
import generateText from './sub'; import $ from 'jquery'; import moment from 'moment'; let app = document.createElement('div'); const myPromise = Promise.resolve(42); myPromise.then((number) => { $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>'); }); app.innerHTML = '<h1>Hello World it</h1>'; document.body.appendChild(app); app.appendChild(generateText()); 

我们上面测试了import, export,const,let,promise等一系列es6的特性。

最后完美的输出界面。



npm install babel-loader babel-preset-es2015 --save-dev
 
目录
相关文章
|
7月前
|
JavaScript
Webpack Babel (编译ES6/7)
Webpack Babel (编译ES6/7)
56 0
|
4月前
|
编解码 JavaScript 前端开发
Node.JS学习 | Babel | webpack | ES6
Node.JS学习 | Babel | webpack | ES6
47 0
webpack基础篇(三):资源解析--解析 ES6
webpack基础篇(三):资源解析--解析 ES6
65 0
|
前端开发 JavaScript
Webpack搭建ES6开发环境步骤
Webpack搭建ES6开发环境步骤
|
JavaScript 前端开发
Webpack搭建ES6开发环境(部分摘自网络)
Webpack搭建ES6开发环境(部分摘自网络)
96 0
Webpack搭建ES6开发环境(部分摘自网络)
|
JavaScript Serverless Shell
开发函数计算的正确姿势——支持 ES6 语法和 webpack 压缩
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。
3830 0
|
Web App开发 前端开发 JavaScript
|
JavaScript 前端开发 索引
|
JavaScript 前端开发
ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(下)
## 回顾 > ## 起因 > 某天,某测试说:“这个页面在 IE8 下白屏,9也白。。” > 某前端开发: 吭哧吭哧。。。一上午的时间就过去了,搞定了。 > 第二天,某测试说:“IE 又白了。。” > 某前端开发: 嘿咻嘿咻。。。谁用的 `Object.assign`,出
7098 0
|
前端开发 JavaScript
ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)
## 起因 某天,某测试说:“这个页面在 IE8 下白屏,9也白。。” 某前端开发: 吭哧吭哧。。。一上午的时间就过去了,搞定了。 第二天,某测试说:“IE 又白了。。” 某前端开发: 吭哧吭哧。。。谁用的 `Object.assign`,出来我保证削不屎你。 ![](https://gw.alicdn.com/tfscom/TB1AR1.LXXXXXaNXpXXXXXX
12591 0