scope-loader

define local scope for all popular frame when you write your template, eg: Vue/Angular/React.It's just a syntax sugar. You can use it as a webpack loader,then you define local scope,and you never need to write long and long object path.

Usage

I give an example using Vue,of course,it works with others frontend frame's template. Say you have to write an user.vue component

normally, your user.vue code will be:

<template>
    <div>
        <p>{{data.users && data.users[0] && data.users[0].name}}</p>
        <p>{{data.users && data.users[0] && data.users[0].age}}</p>
        <p>{{data.users && data.users[0] && data.users[0].gender}}</p>
        <div>
        	<p>{{data.users && data.users[0] && data.users[0].parents 
        		&& data.users[0].parents[0] && data.users[0].parents[0].father}}</p>
        </div>
      </div>
</template>

well,we write data.users[0] repeatedly,long and boring. scope-loader solve this problem.The only thing you need to do is add scope-loader for your .vue file.

install scope-loader

npm install scope-loader --save-dev

webpack4 loader config. attention：vue-loader version must be 10.1.0 or higher,for detail:(https://github.com/vuejs/vue-loader/issues/542)

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader','scope-loader']
      }
    ]
  }
}

then,your user.vue code can be:

<template>
<!-- scope 
    var __user="data.users && data.users[0] || {}"
-->
    <div>
      <p>{{__user.name}}</p>
      <p>{{__user.age}}</p>
      <p>{{__user.gender}}</p>
      <div>
      	<!-- scope 
              var __parents="__user.parents && __user.parents[0]" -->
        	<p>{{__parents.father}}</p>
        	<!-- /scope -->
        </div>
    </div>
<!-- /scope -->
</template>

You can use html comments to define your local variable,which is available for the template in side the start scope and end scope.And it can be nested. As follows,"__user" is totally equals to "data.users && data.users[0] || {}"

<!-- scope 
    var __user="data.users && data.users[0] || {}"
-->

<!-- /scope -->

Attention:the variable you define must be start with "__",otherwise,it won't work.

中文版README(https://zhuanlan.zhihu.com/p/39968059)