BETA

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@showyleeの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!