ES6学习之开发环境配置

前言

前几天说准备开始学习ES6,然后把一些事情忙完终于开始了第一步。之前屯了很多ES6的教程、学习资料。 但是在看之前,我先考虑了一下我的需求,因为我是打算整体迁移。如果仅仅只是babel来转es6语法到es5对我而言没多大用处。而且我现在的技术栈是以vue.js和Node.js为主。因此需要考虑到在此基础上进行开发。幸好vue作者已经拥抱es6了,在其开源的配置环境上加上些许修改可以打造一个比较简单的学习环境。

正文

我们先来看下目录结构


  + package.json //npm配置文件
  + webpack.config.js //webpack配置
  + index.html //页面
  - node_modules //npm加载的模块
  - src //开发资源目录
    - assets //一些资源
      + logo.png  //图片资源
    - components //vue组件
    + app.vue //布局文件
    + app.js  //入口文件
    

重点主要是package.jsonweboack.config.js

首先我们先确定一下我们需要的内容,一个是babel以及相关的包,一个是vue相关的包。

{
  "name": "vue-webpack-Es6",
  "version": "0.0.1",
  "description": "Es6",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --quiet",
    "build": "export NODE_ENV=production && webpack --progress --hide-modules"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.1.18",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-stage-0": "^6.1.18",
    "babel-runtime": "^6.2.0",
    "css-loader": "^0.23.0",
    "file-loader": "^0.8.5",
    "jade": "^1.11.0",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.4.2",
    "template-html-loader": "0.0.3",
    "vue-hot-reload-api": "^1.2.1",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^7.1.4",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "vue": "^1.0.10"
  }
}

然后是webpack的配置:

var webpack = require('webpack')

module.exports = {
    entry: {
        index:'./src/app.js',
    },
    output: { 
        path: __dirname + "/dist/js/",
        filename: "[name].App.js"
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file?name=[name].[ext]?[hash]'
            }
        ]
    },
    // example: if you wish to apply custom babel options
    // instead of using vue-loader's default:
    babel: {
        presets: ['es2015', 'stage-0'],
        plugins: ['transform-runtime']
    }
}

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins = [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin()
    ]
} else {
    module.exports.devtool = '#source-map'
}

看完配置我们需要改变一下我们的编码风格。比如一下开发vue组件是这样的:

<style>

</style>

<template>

</template>

<script>
module.exports = {
  props: ['type'],

  ready:function(){

  },
	methods: {
	 
	},
  data: function () {
    return {
     
    }
  },
 components: {
    //'xxx': require('../components/xxx/xxx.vue'),
  }
}
</script>

但现在需要改变,改成这样:

<style>
.test{
  color: #645646;
  font-size: 25px;
}
</style>

<template>
<div class="test">
  testing!
</div>

<button v-on:click="test">
  点击测试
</button>

</template>

<script>
import CompA from './components/a.vue'
export default {
  data () {
    return {
      msg: 'LinshuiZhaoying'
    }
  },
  methods:{
    test:function(){
      const P = 3.1415;
      
      console.log(P);
    }
  }

  ,
  components: {
    CompA
  }
}
</script>


只是形式改了一下,大体并没什么变化,不过我们已经可以在此基础上开始练习es6的语法了。

结尾

我比较喜欢在正式开始工作前把环境搭好,毕竟工欲善其事必先利其器。

Table of Contents