抽象语法树－AST初探

我兴高采烈地走回家 ==> 我、兴高采烈、地、走回、家

const num = 1;
console.log(num);

[
    {type:'identifier',value:'const'},
    {type:'whitespace',value:' '},    
    {type:'identifier',value:'num'},
    {type:'whitespace',value:' '},
    {type:'operator',value:'='},
    {type:'whitespace',value:' '},
    {type:'num',value:'1'},
    ......
]

我、兴高采烈、地、走回、家 ==> 我（主）、兴高采烈地（状）、走回（谓）、家（宾） 
满足主谓宾定状补结构 ✅

// 正常语境下
我兴高采烈地走回家 ✅
我兴高采烈地滚回家 ❌

// 原始index.js
if (process.env.NODE_ENV === 'production') {
  // 生产代码
  console.log('Welcome to production');
}
if (process.env.DEBUG) {
  // 开发调试代码
  console.log('Debugging output');
}
console.log('running');

// webpack.config.js
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.DEBUG': false,
});

// 环境变量注入
if ('production' === 'production') {
  // 生产代码
  console.log('Welcome to production');
}
if (false) { //
  // 开发调试代码
  console.log('Debugging output');
}
console.log('running');

// DCE处理后
console.log('Welcome to production');

console.log('running');

<!-- 数据绑定 -->
<view> {{ message }} </view>
<!-- 条件渲染 -->
<view wx:if="{{condition}}"> nice day! </view>
<!-- 列表渲染 -->
<view wx:for="{{[0, 1, 2, 3, 4]}}"> {{item}} </view>

Page({
  data: {
    condition: true,
    message: 'heelo word',
  }
})

<!-- 数据绑定 -->
<div> {{ message }} </div>
<!-- 条件渲染 -->
<div v-if="condition"> nice day! </div>
<!-- 列表渲染 -->
<ul>
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [0, 1, 2, 3, 4],
    condition: true,
    message: 'heelo word',
  }
})