import/requireとexport default/module.exportsの違いについて

公開日:2019-01-07
最終更新:2019-01-07

ネットに転がっているVue.jsの単一ファイルコンポーネント実装を見ているとサンプルにimportとrequire、module.exportsとexport defaultの2つの書き方が混在しているが、違いはなんなのか。

node.jsの機能

requireとmodule.exports。
vue.js実装だと以下のように使われる。

// rootコンポーネント  
var component = Vue.Component('example-component', require('ExampleComponent.vue'));  
var app = new Vue({  
    el: "#app",  
    component  
})  

// ExampleComponent.vue  
<script>  
module.exports = {  
    data: function() {  
        // 略  
    }  
}  
</script>

ES2015(ES6)の機能

importとexport。
vue.js実装だと以下のように使われる。

//rootコンポーネント  
import exampleComp from 'ExampleComponent';  
var app = new Vue({  
    // 略  
})  

// ExampleComponent.vue  
<script>  
export default {  
    data: function(){  
        // 略  
    }  
}  
</script>

他にもrequire/import/exportは共存できるらしい。
webpack等を使う場合、node.js構文とES2015構文が混在していると、
Cannot assign to read only property ‘exports’ of object ‘#<Object>’
エラーが発生する。
どちらかといえばES2015が最新構文らしいのでこちらを使うとよい??

参考1
参考2
参考3

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@showyleeの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする