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
 
目录
相关文章
|
JavaScript
Webpack Babel (编译ES6/7)
Webpack Babel (编译ES6/7)
88 0
|
2月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
JavaScript 前端开发 数据库
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)-3
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)
111 0
|
7月前
|
资源调度 前端开发 JavaScript
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
|
7月前
|
编解码 JavaScript 前端开发
Node.JS学习 | Babel | webpack | ES6
Node.JS学习 | Babel | webpack | ES6
89 0
|
Web App开发 JavaScript 前端开发
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)-2
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)
84 0
|
存储 JavaScript 前端开发
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)-1
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)
89 0
webpack基础篇(三):资源解析--解析 ES6
webpack基础篇(三):资源解析--解析 ES6
102 0
|
JavaScript 前端开发
Webpack搭建ES6开发环境(部分摘自网络)
Webpack搭建ES6开发环境(部分摘自网络)
122 0
Webpack搭建ES6开发环境(部分摘自网络)
|
前端开发 JavaScript
Webpack搭建ES6开发环境步骤
Webpack搭建ES6开发环境步骤