You're Invited:Meet the Socket Team at RSAC and BSidesSF 2026, March 23–26.RSVP →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

js-conditional-compile-loader

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

js-conditional-compile-loader - npm Package Compare versions

Comparing version
1.0.14
 to
1.0.15
+0
-0
index.js

@@ -0,0 +0,0 @@ var loaderUtils = require('loader-utils');

+0
-0
LICENSE

@@ -0,0 +0,0 @@ MIT License

+3
-3
package.json
{
"name": "js-conditional-compile-loader",
"version": "1.0.14",
"description": "A javascript conditional compile loader for webpack. 一个javascript条件编译的webpack loader。",
"version": "1.0.15",
"description": "A conditional compiling loader for webpack, support js,ts,css,scss,vue. 一个条件编译的webpack loader，支持js,ts,css,scss,vue等。",
"main": "index.js",

@@ -11,3 +11,3 @@ "scripts": {

"dependencies": {
"loader-utils": "*"
"loader-utils": "2.*"
},

@@ -14,0 +14,0 @@ "keywords": [

+114
-49
readme-cn.md
# js-conditional-compile-loader
- [English](https://github.com/hzsrc/js-conditional-compile-loader/blob/master/readme.md)
- [插件介绍](https://segmentfault.com/a/1190000020102151)
一个javascript条件编译的webpack loader。
条件编译，是指 用同一套代码和同样的编译构建过程，根据设置的条件，选择性地编译指定的代码，从而输出不同程序的过程。
比如：用一套代码实现debug和release环境输出两套不同js程序。
一个条件编译的webpack loader, 支持按条件构建各种代码文件，如js、ts、vue、css、scss、html等。
**条件编译**，是指 用同一套代码和同样的编译构建过程，根据设置的条件，选择性地编译指定的代码，从而输出不同程序的过程。
- 比如：用一套代码实现debug和release环境输出两套不同js程序，debug时直接输出各种数据信息编译开发调试，release时完全不包含这些代码。
- 又如：用一套代码和构建过程针对不同客户编写不同的定制代码，发布时通过不同的命令发布不同的程序：如`npm run build --ali`发布针对ali的程序，`npm run build --tencent`发布针对tencent的程序。
### 用法

@@ -70,50 +74,86 @@ 插件提供了`IFDEBUG`和`IFTRUE`两个条件编译指令。用法是：在js代码的任意地方以`/*IFDEBUG`或`/*IFTRUE_xxx`开头，以`FIDEBUG*/`或`FITRUE_xxx*/`结尾，中间是被包裹的js代码。`xxx`是在webpack中指定的options条件属性名，比如`myFlag`。

查看样例： [vue-element-ui-scaffold-webpack4](https://github.com/hzsrc/vue-element-ui-scaffold-webpack4)
`js-conditional-compile-loader`需要作为处理js文件的第一步。
`js-conditional-compile-loader`需要作为处理源文件的第一步，即放在use数组的末尾。
如下例子为vue、js文件的配置，ts文件的配置类似。css、scss等样式的配置略复杂，可参考[这个样例](https://github.com/hzsrc/vue-element-ui-scaffold-webpack4/blob/master/build/utils.js)
````js
module: {
rules: [
{
test: /\.js$/,
include: [resolve('src'), resolve('test')],
use: [
//step-2
'babel-loader?cacheDirectory',
//step-1
{
loader: 'js-conditional-compile-loader',
options: {
isDebug: process.env.NODE_ENV === 'development', // optional, this is default
myFlag: process.env.ENV_COMPANY === 'ALI', // any name, used for /* IFTRUE_myFlag ...js code... FITRUE_myFlag */
}
},
]
},
//other rules
]
const conditionalCompiler = {
loader: 'js-conditional-compile-loader',
options: {
isDebug: process.env.NODE_ENV === 'development', // optional, this expression is default
envTest: process.env.ENV_CONFIG === 'test', // any prop name you want, used for /* IFTRUE_evnTest ...js code... FITRUE_evnTest */
myFlag: process.env.npm_config_myflag, // enabled when running command: `npm run build --myflag`
}
}
module.exports = {
// others...
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader', conditionalCompiler],
},
{
test: /\.js$/,
include: [resolve('src'), resolve('test')],
use: [
//step-2
'babel-loader?cacheDirectory',
//step-1
conditionalCompiler,
],
},
// others...
]
}
}
````
### options
- isDebug: {bool = [process.env.NODE_ENV === 'development']}
### options 配置
- isDebug: boolean
如果isDebug === false，所有`/\*IFDEBUG` 和 `FIDEBUG\*/`之间的代码都会被移除。 其他情况，这些代码则会被保留。
如果`isDebug` === false，则所有`/\*IFDEBUG` 和 `FIDEBUG\*/`之间的代码都会被移除。 其他情况，这些代码则会被保留。
- 任意属性名：{bool}
如果 value === false，所有`/\* IFTRUE_属性名` 和 `FITRUE_属性名 \*/`之间的代码都会被移除。 其他情况，这些代码则会被保留。
`isDebug`默认取值为：process.env.NODE_ENV === 'development'
- 任意属性名：boolean
如果 [属性值] === false，则所有`/\* IFTRUE_属性名` 和 `FITRUE_属性名 \*/`之间的代码都会被移除。 其他情况，这些代码则会被保留。
## 用法举例
## 用法举例 -- 任意源码，任意位置！
条件编译指令可以用在任意源代码文件的任意位置，不受代码语法限制。
例如：
* 1:
````js
var tx = "This is app /* IFTRUE_Ali of debug FITRUE_Ali */ here";
````
* 1
````typescript
const tx = "This is app /* IFTRUE_Ali of debug FITRUE_Ali */ here";
* 2:
````js
/*IFDEBUG
alert('Hi~');
let tsFunc = function(arr: number[]) : string {
alert('Hi~');
return arr.length.toString()
}
FIDEBUG*/
````
* 2:
````scss
/* IFTRUE_myFlag */
div > ul > li {
a {
color: red;
}
}
/*FITRUE_myFlag */
h2{
background: red;
/* IFTRUE_myFlag
color: blue;
FITRUE_myFlag */
}
````
* 3

@@ -138,15 +178,40 @@ ```js

* 4
```javascript
import { Layout } from 'my-layout-component'
var LayoutRun = Layout
/* IFDEBUG
import FpLayoutLocal from '../../local-code/my-layout-component/src/components/layout.vue'
LayoutRun = FpLayoutLocal
FIDEBUG */
```vue
<temeplate>
<div>
/* IFTRUE_myFlag
<h2>This is a test! For HTML. vue模板内也可以使用！</h2>
<pre>
{{$attrs.info || ''}}
</pre>
FITRUE_myFlag */
</div>
</temeplate>
export default {
components: {
LayoutRun
},
}
<script>
var vueComponent = {
data: {
/* IFTRUE_myFlag
falgData: 'Flag Data',
FITRUE_myFlag */
},
};
</script>
/* IFTRUE_myFlag*/
<style scoped>
.any-where-test {
color: red;
}
</style>
/* FITRUE_myFlag*/
<style id="a" scoped>
/* IFTRUE_myFlag*/
.test-for-css {
color: red;
}
/*FITRUE_myFlag */
</style>
```
+111
-49
readme.md
# js-conditional-compile-loader
- [中文文档](https://github.com/hzsrc/js-conditional-compile-loader/blob/master/readme-cn.md)
- [Introduction](https://segmentfault.com/a/1190000020102151)
A javascript conditional compiling loader for webpack.
Conditional compiling means that we can use the same codes and compiling process, to build different applications with different environment conditions.
For example: we can output two different program for debug or release environment with a same source code project.
A conditional compiling loader for webpack, support any source files like js, ts, vue, css, scss, html.
**Conditional compiling** means that we can use the same codes and compiling process, to build different applications with different environment conditions.
- For example: we can output two different program for debug or release environment with a same source code project.
- Another sample: Use same codes and compiling process to supply different customers, just by using different building command args, like this: `npm run build --ali` for alibaba, `npm run build --tencent` for tencent。
![image](https://hzsrc.github.io/js-conditional-compile-loader/intro.png)
### Usage
This loader provides two commands: `IFDEBUG` and `IFTRUE`. Just use them anywhere in js code like this: Start with `/*IFDEBUG` or `/*IFTRUE_xxx`, end with `FIDEBUG*/` or `FITRUE_xxx*/`, place js code in the center. The `xxx` is any condition property of the options in webpack, such like `myFlag`.
This loader provides two directives: `IFDEBUG` and `IFTRUE`. Just use them anywhere in js code like this: Start with `/*IFDEBUG` or `/*IFTRUE_xxx`, end with `FIDEBUG*/` or `FITRUE_xxx*/`, place js code in the center. The `xxx` is any condition property of the options in webpack, such like `myFlag`.

@@ -67,52 +70,86 @@ - Mode 1 - comment all

Change webpack config like this:
See this sample: vue-element-ui-scaffold-webpack4(https://github.com/hzsrc/vue-element-ui-scaffold-webpack4)
`js-conditional-compile-loader` needs to be add as step 1 for js files.
See this sample: vue-element-ui-scaffold-webpack4(https://github.com/hzsrc/vue-element-ui-scaffold-webpack4)
`js-conditional-compile-loader` needs to be added as step 1 for a rule, means it is set as the last item of the `use` array.
This sample is a config for `vue` and `js` files, `ts` file is alike. For config of css、scss, See [this sample](https://github.com/hzsrc/vue-element-ui-scaffold-webpack4/blob/master/build/utils.js)
````js
module: {
rules: [
{
test: /\.js$/,
include: [resolve('src'), resolve('test')],
use: [
//step-2
'babel-loader?cacheDirectory',
//step-1
{
loader: 'js-conditional-compile-loader',
options: {
isDebug: process.env.NODE_ENV === 'development', // optional, this expression is default
myFlag: process.env.ENV_COMPANY === 'ALI', // any name you want, used for /* IFTRUE_myFlag ...js code... FITRUE_myFlag */
}
},
]
},
//other rules
]
const conditionalCompiler = {
loader: 'js-conditional-compile-loader',
options: {
isDebug: process.env.NODE_ENV === 'development', // optional, this expression is default
envTest: process.env.ENV_CONFIG === 'test', // any prop name you want, used for /* IFTRUE_evnTest ...js code... FITRUE_evnTest */
myFlag: process.env.npm_config_myflag, // enabled by `npm run build --myflag`
}
}
module.exports = {
// others...
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader', conditionalCompiler],
},
{
test: /\.js$/,
include: [resolve('src'), resolve('test')],
use: [
//step-2
'babel-loader?cacheDirectory',
//step-1
conditionalCompiler,
],
},
// others...
]
}
}
````
### options
- isDebug: {bool = [process.env.NODE_ENV === 'development']}
- isDebug: boolean
If isDebug === false, all the codes between `/\*IFDEBUG` and `FIDEBUG\*/` will be removed, otherwise the codes will be remained.
If `isDebug` === false, all the codes between `/\*IFDEBUG` and `FIDEBUG\*/` will be removed, otherwise the codes will be remained.
Defualt value of `isDebug` is set by: process.env.NODE_ENV === 'development'
- \[any propertyName\]：{bool}
if value === false, all codes between `/\* IFTRUE_propertyName` and `FITRUE_propertyName \*/` will be removed, otherwise the codes will be remained.
if [propertyValue] === false, all codes between `/\* IFTRUE_propertyName` and `FITRUE_propertyName \*/` will be removed, otherwise the codes will be remained.
## Samples
## Samples -- Any file, Anywhere!
Conditional compiling directives can be used anywhere in any source files.
Like these:
* 1:
````js
var tx = "This is app /* IFTRUE_Ali of debug FITRUE_Ali */ here";
````
````typescript
const tx = "This is app /* IFTRUE_Ali of debug FITRUE_Ali */ here";
* 2:
````js
/*IFDEBUG
alert('Hi~');
let tsFunc = function(arr: number[]) : string {
alert('Hi~');
return arr.length.toString()
}
FIDEBUG*/
````
* 2:
````scss
/* IFTRUE_myFlag */
div > ul > li {
a {
color: red;
}
}
/*FITRUE_myFlag */
h2{
background: red;
/* IFTRUE_myFlag
color: blue;
FITRUE_myFlag */
}
````
* 3

@@ -137,15 +174,40 @@ ```js

* 4
```javascript
import { Layout } from 'my-layout-component'
var LayoutRun = Layout
/* IFDEBUG
import LayoutLocal from '../../local-code/my-layout-component/src/components/layout.vue'
LayoutRun = LayoutLocal
FIDEBUG */
```vue
<temeplate>
<div>
/* IFTRUE_myFlag
<h2>This is a test! For HTML. vue模板内也可以使用！</h2>
<pre>
{{$attrs.info || ''}}
</pre>
FITRUE_myFlag */
</div>
</temeplate>
export default {
components: {
LayoutRun
},
}
<script>
var vueComponent = {
data: {
/* IFTRUE_myFlag
falgData: 'Flag Data',
FITRUE_myFlag */
},
};
</script>
/* IFTRUE_myFlag*/
<style scoped>
.any-where-test {
color: red;
}
</style>
/* FITRUE_myFlag*/
<style id="a" scoped>
/* IFTRUE_myFlag*/
.test-for-css {
color: red;
}
/*FITRUE_myFlag */
</style>
```
+0
-0
replacer.js

@@ -0,0 +0,0 @@ var REG = /\/\*\s*IF(DEBUG|TRUE_\w+)(?:\s*\*\/)?([\s\S]+?)(?:\/\*\s*)?FI\1\s*\*\//g;