Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lovetingyuan/vue-flags-webpack-plugin
Remove useless code by setting flags(toggles) in vue (or without vue) project
https://github.com/lovetingyuan/vue-flags-webpack-plugin
feature-flags features flags optimization plugin postcss toggle vue webpack
Last synced: 17 days ago
JSON representation
Remove useless code by setting flags(toggles) in vue (or without vue) project
- Host: GitHub
- URL: https://github.com/lovetingyuan/vue-flags-webpack-plugin
- Owner: lovetingyuan
- License: mit
- Created: 2018-09-27T06:45:56.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-09T07:55:14.000Z (over 4 years ago)
- Last Synced: 2024-04-30T02:44:15.581Z (7 months ago)
- Topics: feature-flags, features, flags, optimization, plugin, postcss, toggle, vue, webpack
- Language: JavaScript
- Homepage:
- Size: 738 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-flags-webpack-plugin
Remove useless code by setting flags(toggles) in .vue SFC file
[](https://www.npmjs.com/package/vue-flags-webpack-plugin)
[](https://travis-ci.org/lovetingyuan/vue-flags-webpack-plugin)
[](https://standardjs.com)
### ⚙ Usage
install:
```bash
npm install vue-flags-webpack-plugin -D
```
options:
* `flags` ({[k: string]: boolean} | string, required)
A plain object that contains flags value(boolean).
Or a file path(will be executed many times!) which exports the final flags object.
```javascript
flags: {
FLAG_A: true,
FLAG_B: false,
}
// or
flags: './config/allFlags.js'
```
* `namespace` (string, required)
used as namespace of flags in JavaScript, must be a valid variable name.
* `watch` (boolean | string[], default: false)
Support to modify flags and reload your app when this option is set.
Set this option ONLY in development mode.
If `watch` is `true`, option `flags` must be a file path.
`watch` could also be an array including extra files paths which will be watched.
```javascript
watch: process.env.NODE_ENV === 'development'
// or (no need to add extra files in most cases, just set it true)
watch: [ './config/flag1.js', './config/flag2.js' ]
```
* `ignoreFiles` ({[k: string]: RegExp | RegExp[]})
A plain object that uses flag name or expression as key and regexp as value.
Modules(absolute path) matched by the regexps will be ignored when the value of flags is `false`.
```javascript
ignoreFiles: {
// if FLAG_A is false, a.js will be ignored,
'FLAG_A': [/a\.js$/],
// if FLAG_A is false or FLAG_B is true, a-b.js will be ignored
'FLAG_A && !FLAG_B': [/a-not-b\.js$/],
}
```
### 🌰 Example
flags file: `./allFlags.js`
```javascript
module.exports = {
FLAG_A: true,
FLAG_B: false,
}
```
webpack config:
```javascript
const VueFlagsPlugin = require('vue-flags-webpack-plugin');
const postcssFlagsPlugin = VueFlagsPlugin.postcssFlagsPlugin;
module.exports = {
module: {
rules: [{
test: /\.css$/,
loader: 'postcss-loader',
options: {
plugins: [
postcssFlagsPlugin()
]
}
}]
},
plugins: [
new VueFlagsPlugin({
flags: './allFlags.js',
namespace: 'FLAGS',
watch: process.env.NODE_ENV === 'development',
ignoreFiles: {
FLAG_B: [/b-related-module\.js$/]
}
})
]
};
```
vue component:
```html
feature a will be enabled
{{msg}}
both feature a and b will be disabled
import moduleB from './b-related-module';
export default {
data() {
return {
// "FLAGS" as namespace
msg: FLAGS.FLAG_B ? 'feature b content' : '...';
}
},
mounted() {
// if FLAG_B is false, moduleB is undefined
if (moduleB) { moduleB() }
}
}
p { color: yellow; }
@supports (--flag: FLAG_A) {
p { font-size: 2em; }
}
@supports not ((--flag: FLAG_A) or (--flag: FLAG_B)) {
p { display: none; }
}
/**
You must use "--flag" as custom property name
see @supports: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
above will be transformed as:
p { color: yellow; }
p { font-size: 2em; }
*/
```
### ⚠️ Caveats
* requires [`vue-loader`](https://github.com/vuejs/vue-loader) >= 15, `webpack` >= 4, `vue-template-compiler` >= 2.5.0
* `v-*-flag` can not be used with vue condition directive(`v-if`,`v-else-if`,`v-else`).
💡use `` to wrap the condition block.
* `v-*-flag` can not be used with `v-pre` directive or under it.
* `v-*-flag` should not be used with `slot-scope` or `v-slot`.
* The plugin will execute flag expression, make sure the flag value is safe.
### License
MIT