您的位置：首页 > Web前端 > Webpack

利用webpack搭建es6环境

2016-08-31 12:28 525 查看

好多人看到es6得时候，都会被它吸引住，然而现在的浏览器对es6的支持还不是很完美，我也开始学习es6，也有这个浏览器支持不足的苦恼。然而有个神器叫babel的东东在es6跟es5之间搭起了一座桥梁。现在就用一个打包神器webpack来搭起一个es6转es5的环境。

首先用npm下载相关的资源

npm的步骤：

1、npm init 创建package.json文件创建好的结果如下：

{
"name": "webpack_es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "张弋",
"license": "ISC"
}

2、安装相关的资源可以用npm install [资源名] [–save]

也可以直接修改package.json,如下：

"devDependencies": {
"babel-loader": "^6.2.5",
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"webpack": "^1.12.2"
}

最终的package.json是这个样子的：

{
"name": "webpack_es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^6.2.5",
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"webpack": "^1.12.2"
}
}

别忘了 npm install 一下哦！

利用npm下载完相关资源之后目录结构为：

ok，到这里资源包就搞好了，so easy！

接下来在目录下新建index.js:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="out/bundle.js"></script>
</html>

out/bundle.js 这个文件目前是不存在的，等后面webpack配置好后自动打包生成。

建立src/entry.js 文件以及 src/module/moduleWithES6.js文件。

其中src/module/moduleWithES6.js代码如下：

class People{
constructor(name){
this.name = name;
}
sayHi(){
console.log('Hi '+this.name)
}
}
export default People;

src/entry.js代码如下：

import Person from './module/moduleWithES6.js';
var p = new Person("zhangyi");
p.sayHi();

最后建立一个webpack的配置文件（webpack.config.js）：

var path = require("path");

module.exports = {
entry:'./src/entry', //输入文件
output:{
path:path.join(__dirname,'out'),  //输出文件路径
filename:'bundle.js',
publicPath:'./out/'
},
module:{
loaders:[
{text:/\.js$/,
loader:'babel-loader',  //babel的插件
query: {
presets: ['es2015',"stage-0"]
}
},
{test: /\.css$/, loader: "style!css"},
{test: /\.(jpg|png)$/, loader: "url?limit=8192"},
{test: /\.scss$/, loader: "style!css!sass"}
]
}
}

最终的目录结构：

接下来时见证奇迹的时候：

运行：webpack

没问题，然后会发现生成了输出目录out/bundle.js。

在bundle.js中你会发现代码被转成es5的语法了：

var People = function () {
function People(name) {
(0, _classCallCheck3.default)(this, People);

this.name = name;
}

(0, _createClass3.default)(People, [{
key: 'sayHi',
value: function sayHi() {
console.log('Hi ' + this.name);
}
}]);
return People;
}();

到此这个es6转es5的环境就搭建完成了，可以好好学习es6的语法了！是不是很6？稍后共享代码。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航