es2015 形式を認識しない vue-loader に問題があります。
私が取っている手順は次のとおりです。
//initialize the project via vue-cli
vue init webpack-simple && npm i
// start the webpack-dev-server, this npm script is an alias for the command:
// webpack-dev-server --inline --hot
npm run dev
この時点で、ファイルは webpack-dev-server によって localhost:8080 で正常にホストされています。
App.vuees2015を変更して追加すると、webpack-dev-server からエラーが発生します。
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue!'
}
},
// added this function call for the ready lifecycle hook
ready () => alert('worked')
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
これにより、babel の es2015 プリセットがインストールされていないと思いましたが、それは間違いなく変換ランタイムと共に開発依存関係リストに含まれています。
// truncated package.json
{
...
"scripts": {
"dev": "webpack-dev-server --inline --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^1.0.0",
"babel-runtime": "^5.8.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"cross-env": "^1.0.6",
"css-loader": "^0.23.0",
"file-loader": "^0.8.4",
"json-loader": "^0.5.4",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.2.1",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
}
}
さらに、vue-loader のドキュメントには、es2015 がデフォルトで有効になっていると書かれています。
vue-loader によって提供される多くの優れた機能があります。
ES2015 はデフォルトで有効になっています。
不足している手順または構成はありますか?
バージョン:
- vue-cli: 2.0.3
- npm: 3.8.6
- ノード: 6.0.0