babel-plugin-scenes

分场景编译对应后缀文件的babel插件。

why babel-plugin-scenes

业务中有时候会因为多个场景差异小而使用同一套代码来实现，然后部署到各自服务器上，一些差异化的需求就在代码中判断不同场景使用不同的代码，但是其实在一个场景下其他场景的代码是多余的(永远不会被执行)，所以这些代码不应该被打包进去，同时当各个场景的代码差异化越来越严重时，仅在代码中进行判断运行代码会越来越复杂难以维护，后续如果要完全拆分成两个项目时也会更加麻烦。

把不同场景有差异的代码放在不同文件维护，如page.js和page.en.js，然后打包的时候根据场景打包对应的文件。

Usage

npm install babel-plugin-scenes --save-dev

修改.babelrc 或者 babel-loader

{
  "plugins": [["scenes", options]]
}

options

options是一个对象，里面可以包含以下属性：

scene [string]

设定应用场景，插件会根据这个属性去打包对应后缀的文件，比如设置为：

{
  "scene": "test",
}

//index.js
import {a,b} from './component'

就会去打包对应的component.test.js，如果不存在这个文件的话，就还是打包原有的component.js。

js文件类型后缀可以不带。不只是js文件，其他类型文件的依赖也都可以处理。

alias [object] (v1.1.0)

别名设置，功能同webpack的别名。注意此处别名webpack配置的别名。

注意

目前插件可以处理的模块引入方式有： ES6的import from的模块引入方式；(v1.0.0) ES6的import()动态加载方法； (v1.2.0) require()模块引入。(v1.2.0) 以上方法均支持在引用文件夹下的index.js文件时忽略index的写法

需要对babel进行设置不开启缓存。因为babel缓存的缘故，有时候更改文件后缀之后需要修改引用该后缀文件的文件代码才会起效。