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

Comparing version 1.0.9 to 1.0.10

readme-cn.md

+# js-conditional-compile-loader
+
+一个javascript条件编译的webpack loader。
+条件编译指按照需要，按照环境设置的条件，选择性地编译或不编译指定的代码。
+比如：用一套代码实现debug和release环境输出两套不同js程序。
+
+### Usage
+这样用就行：
+
+````js
+    /*IFDEBUG Any js here FIDEBUG*/
+````
+or
+````js
+/* IFTRUE_yourFlagName ...js code... FITRUE_yourFlagName */
+````
+以“/\*IFDEBUG”开头，以“FIDEBUG\*/”结尾，中间是js代码。可以用在js文件的任意地方。
+
+* sample -- sorce code:
+````js
+$state.go('win', {dir: menu.winId /*IFDEBUG , reload: true FIDEBUG*/})
+````
+Output for debug:
+````js
+$state.go('win', {dir: menu.winId, reload: true })
+````
+
+Output of production:
+````js
+$state.go('win', {dir: menu.winId})
+````
+
+* sample2:
+````js
+var tx = "This is app /* IFTRUE_Ali of debug FITRUE_Ali */ here";
+````
+
+* sample3:
+````js
+/*IFDEBUG
+alert('Hi~');
+FIDEBUG*/
+````
+因为采用了js注释的形式，故即使不使用js-conditional-compile-loader，也不影响js代码的运行逻辑。
+
+### 安装
+````bash
+    npm i -D js-conditional-compile-loader
+````
+
+### webpack配置
+你需要像这样修改webpack配置:     
+See this sample: vue-element-ui-scaffold-webpack4(https://github.com/hzsrc/vue-element-ui-scaffold-webpack4)
+
+````js
+module: {
+    rules: [
+        {
+            test: /\.js$/,
+            include: [resolve('src'), resolve('test')],
+            exclude: file => (
+                /node_modules/.test(file) && !/\.vue\.js/.test(file)
+            ),
+            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
+    ]
+}
+````
+### options
+- isDebug: {bool = [process.env.NODE_ENV === 'development']}
+
+如果isDebug === false，所有`/\*IFDEBUG` 和 `FIDEBUG\*/`之间的代码都会被移除。 其他情况，这些代码则会被保留。
+
+- 任意属性名：{bool}
+如果 value === false，所有`/\* IFTRUE_属性名` 和 `FITRUE_属性名 \*/`之间的代码都会被移除。 其他情况，这些代码则会被保留。
+
+	
+## 用法举例
+* 1
+```js
+Vue.component('debugInfo', {
+    template: ''
+    /* IFDEBUG
+        + '<pre style="font-size:13px;font-family:\'Courier\',\'Courier New\';z-index:9999;line-height: 1.1;position: fixed;top:0;right:0; pointer-events: none">{{JSON.stringify($attrs.info || "", null, 4).replace(/"(\\w+)":/g, "$1:")}}</pre>'
+    FIDEBUG */
+    ,
+    watch: {
+      /* IFDEBUG
+      curRule (v){
+          this.ruleData = v
+      },
+      FIDEBUG */
+    },
+});
+```
+
+* 2
+```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 */
+
+export default {
+components: {
+  LayoutRun
+},
+}
+```

test/index.test.js

+var plugin = require('../index')
+var glob = require('glob')
+var fs = require('fs')
+var path = require('path')
+
+var resolve = path.resolve.bind(null, __dirname)
+
+// glob(resolve('./src/**/*.js'), function (er, files) {
+//   if (er) throw er
+//   files.map(file => {
+//   })
+// })
+
+test('IFDEBUG true', () => {
+  testOne('src/IFDEBUG.js', { isDebug: true }, /font-size:13px[\s\S]+this.ruleData/)
+})
+
+test('IFDEBUG false', () => {
+  testOne('src/IFDEBUG.js', { isDebug: false }, /template: ''\s+,\s+watch: \{\s+\}/)
+})
+
+test('IFTRUE myFlag=true', () => {
+  testOne('src/IFTRUE.js', { myFlag: true }, /font-size:13px[\s\S]+this.ruleData/)
+})
+test('IFTRUE myFlag=false', () => {
+  testOne('src/IFTRUE.js', { myFlag: false }, /template: ''\s+,\s+watch: \{\s+\}/)
+})
+
+
+function testOne(file, options, reg, notReg) {
+  var src = fs.readFileSync(resolve(file), 'utf-8')
+  var result = plugin._rp(src, options)
+  expect(result).toMatch(reg)
+  expect(result).not.toMatch(plugin._reg)
+}

test/src/IFDEBUG.js

+var vueComponent = {
+  template: ''
+  /* IFDEBUG
+      + '<pre style="font-size:13px;font-family:\'Courier\',\'Courier New\';z-index:9999;line-height: 1.1;position: fixed;top:0;right:0; pointer-events: none">{{JSON.stringify($attrs.info || "", null, 4).replace(/"(\\w+)":/g, "$1:")}}</pre>'
+  FIDEBUG */
+  ,
+  watch: {
+    /* IFDEBUG
+    curRule (v){
+        this.ruleData = v
+    },
+    FIDEBUG */
+  },
+};

test/src/IFTRUE.js

+var vueComponent = {
+  template: ''
+  /* IFTRUE_myFlag
+      + '<pre style="font-size:13px;font-family:\'Courier\',\'Courier New\';z-index:9999;line-height: 1.1;position: fixed;top:0;right:0; pointer-events: none">{{JSON.stringify($attrs.info || "", null, 4).replace(/"(\\w+)":/g, "$1:")}}</pre>'
+  FITRUE_myFlag */
+  ,
+  watch: {
+    /* IFTRUE_myFlag
+    curRule (v){
+        this.ruleData = v
+    },
+    FITRUE_myFlag */
+  },
+};

.idea/workspace.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="d3bd5335-f959-4ad3-b315-9847a84a2d6e" name="Default Changelist" comment="">
+    <list default="true" id="d3bd5335-f959-4ad3-b315-9847a84a2d6e" name="Default Changelist" comment="samples">
+      <change afterPath="$PROJECT_DIR$/readme-cn.md" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/test/index.test.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/test/src/IFDEBUG.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/test/src/IFTRUE.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/readme.md" beforeDir="false" afterPath="$PROJECT_DIR$/readme.md" afterDir="false" />
     </list>
@@ -16,45 +22,9 @@ <ignored path="$PROJECT_DIR$/.tmp/" />
   </component>
-  <component name="FUSProjectUsageTrigger">
-    <session id="-954784239">
-      <usages-collector id="statistics.lifecycle.project">
-        <counts>
-          <entry key="project.open.time.1" value="1" />
-          <entry key="project.opened" value="1" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.extensions.open">
-        <counts>
-          <entry key="js" value="1" />
-          <entry key="json" value="2" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.types.open">
-        <counts>
-          <entry key="JSON" value="2" />
-          <entry key="JavaScript" value="1" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.extensions.edit">
-        <counts>
-          <entry key="js" value="7" />
-          <entry key="json" value="1" />
-          <entry key="txt" value="12" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.types.edit">
-        <counts>
-          <entry key="JSON" value="1" />
-          <entry key="JavaScript" value="7" />
-          <entry key="PLAIN_TEXT" value="12" />
-        </counts>
-      </usages-collector>
-    </session>
-  </component>
   <component name="FileEditorManager">
-    <leaf>
-      <file pinned="false" current-in-tab="true">
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="375">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="247">
-              <caret line="13" column="47" selection-start-line="13" selection-start-column="14" selection-end-line="13" selection-end-column="47" />
+            <state relative-caret-position="266">
+              <caret line="14" column="45" lean-forward="true" selection-start-line="14" selection-start-column="45" selection-end-line="14" selection-end-column="45" />
             </state>
@@ -65,6 +35,23 @@ </provider>
       <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/readme.md">
+          <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+            <state split_layout="SPLIT">
+              <first_editor relative-caret-position="281">
+                <caret line="86" column="124" selection-start-line="86" selection-start-column="124" selection-end-line="86" selection-end-column="124" />
+                <folding>
+                  <element signature="n#!!doc" expanded="true" />
+                  <element signature="n#!!doc" expanded="true" />
+                  <element signature="n#!!doc" expanded="true" />
+                </folding>
+              </first_editor>
+              <second_editor />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/package.json">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="304">
-              <caret line="16" column="4" lean-forward="true" selection-start-line="16" selection-start-column="4" selection-end-line="16" selection-end-column="4" />
+            <state relative-caret-position="95">
+              <caret line="5" column="14" lean-forward="true" selection-start-line="5" selection-start-column="14" selection-end-line="5" selection-end-column="14" />
             </state>
@@ -74,4 +61,59 @@ </provider>
       </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/test/index.test.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="232">
+              <caret line="22" column="81" selection-start-line="22" selection-start-column="81" selection-end-line="22" selection-end-column="81" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/test/src/IFTRUE.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="133">
+              <caret line="7" column="20" selection-start-line="7" selection-start-column="20" selection-end-line="7" selection-end-column="20" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/test/src/IFDEBUG.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state>
+              <caret selection-end-line="13" selection-end-column="2" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/readme-cn.md">
+          <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+            <state split_layout="SPLIT">
+              <first_editor relative-caret-position="396">
+                <caret line="95" column="23" selection-start-line="95" selection-start-column="22" selection-end-line="95" selection-end-column="23" />
+                <folding>
+                  <element signature="n#!!doc" expanded="true" />
+                  <element signature="n#!!doc" expanded="true" />
+                </folding>
+              </first_editor>
+              <second_editor />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/LICENSE">
+          <provider selected="true" editor-type-id="text-editor" />
+        </entry>
+      </file>
     </leaf>
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="JavaScript File" />
+      </list>
+    </option>
+  </component>
   <component name="FindInProjectRecents">
@@ -81,3 +123,9 @@ <findStrings>
       <find>REG</find>
+      <find>replaceIfDebug</find>
+      <find>&quot;</find>
     </findStrings>
+    <replaceStrings>
+      <replace>replaceMatched</replace>
+      <replace>`</replace>
+    </replaceStrings>
   </component>
@@ -90,25 +138,21 @@ <component name="Git.Settings">
       <list>
+        <option value="$PROJECT_DIR$/test/src/index.js" />
+        <option value="$PROJECT_DIR$/test/index.js" />
+        <option value="$PROJECT_DIR$/test/src/IFTRUE.js" />
+        <option value="$PROJECT_DIR$/test/index.test.js" />
+        <option value="$PROJECT_DIR$/index.js" />
+        <option value="$PROJECT_DIR$/readme.md" />
+        <option value="$PROJECT_DIR$/readme-cn.md" />
         <option value="$PROJECT_DIR$/package.json" />
-        <option value="$PROJECT_DIR$/index.js" />
       </list>
     </option>
   </component>
-  <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
-  <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER">
-    <package-json value="$PROJECT_DIR$/package.json" />
-  </component>
-  <component name="JsGulpfileManager">
-    <detection-done>true</detection-done>
-    <sorting>DEFINITION_ORDER</sorting>
-  </component>
-  <component name="NodePackageJsonFileManager">
-    <packageJsonPaths>
-      <path value="$PROJECT_DIR$/package.json" />
-    </packageJsonPaths>
-  </component>
   <component name="ProjectFrameBounds" extendedState="6">
     <option name="y" value="23" />
     <option name="width" value="1920" />
-    <option name="height" value="1010" />
+    <option name="height" value="1007" />
   </component>
+  <component name="ProjectLevelVcsManager">
+    <OptionsSetting value="false" id="Update" />
+  </component>
   <component name="ProjectView">
@@ -119,2 +163,3 @@ <navigator proportions="" version="1">
     <panes>
+      <pane id="Scope" />
       <pane id="ProjectPane">
@@ -127,2 +172,13 @@ <subPane>
             </path>
+            <path>
+              <item name="js-conditional-compile-loader" type="b2602c69:ProjectViewProjectNode" />
+              <item name="js-conditional-compile-loader" type="462c0819:PsiDirectoryNode" />
+              <item name="test" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="js-conditional-compile-loader" type="b2602c69:ProjectViewProjectNode" />
+              <item name="js-conditional-compile-loader" type="462c0819:PsiDirectoryNode" />
+              <item name="test" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+            </path>
           </expand>
@@ -132,3 +188,2 @@ <select />
       </pane>
-      <pane id="Scope" />
     </panes>
@@ -141,4 +196,14 @@ </component>
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+    <property name="nodejs_package_manager_path" value="npm" />
     <property name="settings.editor.selected.configurable" value="web.server" />
   </component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/test" />
+    </key>
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/test/src" />
+      <recent name="$PROJECT_DIR$" />
+    </key>
+  </component>
   <component name="RunDashboard">
@@ -166,3 +231,8 @@ <option name="ruleStates">
       <updated>1550026768082</updated>
-      <workItem from="1550026769527" duration="822000" />
+      <workItem from="1550026769527" duration="2082000" />
+      <workItem from="1550035725709" duration="20000" />
+      <workItem from="1550035779954" duration="9000" />
+      <workItem from="1555293564344" duration="292000" />
+      <workItem from="1555580002774" duration="1492000" />
+      <workItem from="1563169454198" duration="6088000" />
     </task>
@@ -176,20 +246,31 @@ <task id="LOCAL-00001" summary="空格支持">
     </task>
-    <option name="localTasksCounter" value="2" />
+    <task id="LOCAL-00002" summary="空格支持">
+      <created>1550027635865</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1550027635865</updated>
+    </task>
+    <task id="LOCAL-00003" summary="samples">
+      <created>1555581893764</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1555581893764</updated>
+    </task>
+    <option name="localTasksCounter" value="4" />
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="822000" />
+    <option name="totallyTimeSpent" value="9983000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="0" y="23" width="1920" height="1010" extended-state="6" />
+    <frame x="0" y="23" width="1920" height="1008" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info id="npm" side_tool="true" />
-      <window_info id="Favorites" side_tool="true" />
       <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24973601" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
-      <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Version Control" />
-      <window_info anchor="bottom" id="Terminal" />
-      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info id="npm" order="2" side_tool="true" />
+      <window_info id="Favorites" order="3" side_tool="true" />
+      <window_info anchor="bottom" id="Messages" />
       <window_info anchor="bottom" id="Message" order="0" />
@@ -202,2 +283,6 @@ <window_info anchor="bottom" id="Find" order="1" />
       <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" />
+      <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
+      <window_info anchor="bottom" id="Terminal" order="10" visible="true" weight="0.24860647" />
       <window_info anchor="right" id="Commander" order="0" weight="0.4" />
@@ -211,25 +296,79 @@ <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
   </component>
-  <component name="VcsContentAnnotationSettings">
-    <option name="myLimit" value="2678400000" />
-  </component>
   <component name="VcsManagerConfiguration">
     <MESSAGE value="空格支持" />
-    <option name="LAST_COMMIT_MESSAGE" value="空格支持" />
+    <MESSAGE value="samples" />
+    <option name="LAST_COMMIT_MESSAGE" value="samples" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/package.json">
+    <entry file="file://$PROJECT_DIR$/LICENSE">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/node_modules/loader-utils/lib/index.js">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/test/src/IFDEBUG.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="304">
-          <caret line="16" column="4" lean-forward="true" selection-start-line="16" selection-start-column="4" selection-end-line="16" selection-end-column="4" />
+        <state>
+          <caret selection-end-line="13" selection-end-column="2" />
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/test/src/IFTRUE.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="133">
+          <caret line="7" column="20" selection-start-line="7" selection-start-column="20" selection-end-line="7" selection-end-column="20" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/test/index.test.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="232">
+          <caret line="22" column="81" selection-start-line="22" selection-start-column="81" selection-end-line="22" selection-end-column="81" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/readme.md">
+      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+        <state split_layout="SPLIT">
+          <first_editor relative-caret-position="281">
+            <caret line="86" column="124" selection-start-line="86" selection-start-column="124" selection-end-line="86" selection-end-column="124" />
+            <folding>
+              <element signature="n#!!doc" expanded="true" />
+              <element signature="n#!!doc" expanded="true" />
+              <element signature="n#!!doc" expanded="true" />
+            </folding>
+          </first_editor>
+          <second_editor />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/readme-cn.md">
+      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+        <state split_layout="SPLIT">
+          <first_editor relative-caret-position="396">
+            <caret line="95" column="23" selection-start-line="95" selection-start-column="22" selection-end-line="95" selection-end-column="23" />
+            <folding>
+              <element signature="n#!!doc" expanded="true" />
+              <element signature="n#!!doc" expanded="true" />
+            </folding>
+          </first_editor>
+          <second_editor />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="247">
-          <caret line="13" column="47" selection-start-line="13" selection-start-column="14" selection-end-line="13" selection-end-column="47" />
+        <state relative-caret-position="266">
+          <caret line="14" column="45" lean-forward="true" selection-start-line="14" selection-start-column="45" selection-end-line="14" selection-end-column="45" />
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/package.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="95">
+          <caret line="5" column="14" lean-forward="true" selection-start-line="5" selection-start-column="14" selection-end-line="5" selection-end-column="14" />
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>

index.js

 var loaderUtils = require('loader-utils');
-var REG = /\/\*\s*IFDEBUG([\s\S]+?)FIDEBUG\s*\*\//g;
+var REG = /\/\*\s*IF(DEBUG|TRUE\w+)([\s\S]+?)FI\1\s*\*\//g;
 
 module.exports = function (source) {
-    var opts = Object.assign(
-        {isDebug: process.env.NODE_ENV === 'development'}, //默认isDebug
-        loaderUtils.getOptions(this)
-    );
-    return replaceIfDebug(source, opts)
+  var options = Object.assign(
+    { isDebug: process.env.NODE_ENV === 'development' }, //默认的isDebug
+    loaderUtils.getOptions(this)
+  );
+  return replaceMatched(source, options)
 };
+module.exports._rp = replaceMatched
+module.exports._reg = REG
 
-function replaceIfDebug(js, opt) {
-    var isDebug = opt.isDebug !== false;
-    return js.replace(REG, isDebug ? '$1' : '');
+function replaceMatched(js, options) {
+  return js.replace(REG, (match, $1, $2) => {
+    var isDropCode;
+    if ($1 === 'DEBUG') {
+      isDropCode = options.isDebug === false
+    } else {
+      var varName = $1.slice(5)
+      isDropCode = options[varName] === false
+    }
+    return isDropCode ? '' : $2
+  });
 }

package.json

@@ -1,8 +0,9 @@
-{
+{
   "name": "js-conditional-compile-loader",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A javascript conditional compile loader for webpack. 一个javascript条件编译的webpack loader。",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"No test specified\" && exit 1"
+    "test": "jest",
+    "prepublish": "npm test"
   },
@@ -24,3 +25,7 @@ "dependencies": {
   "license": "MIT",
-  "readme": "readme.md"
+  "readme": "readme.md",
+  "devDependencies": {
+    "jest": "^24.8.0",
+    "loader-utils": "^1.2.3"
+  }
 }

readme.md

 # js-conditional-compile-loader
 
-A javascript conditional compile loader for webpack. You can easily output two different codes for debug or release environment with one source code.    
-(一个javascript条件编译的webpack loader。可以很容易用一套代码实现debug和release环境输出两套不同js代码的。)
+A javascript conditional compiling loader for webpack. 
+Conditional compiling means that we can compile or not compile some js code according to some environment variables.
+For example: we can output two different program for debug or release environment with a same source code project.    
 
-### Usage in JS files
-Just use it like this:    
-(这样用就行)：
+### Usage
+Just use it anywhere in js code like this:    
 
-    /*IFDEBUG Any js here FIDEBUG*/
-
+````js
+/* IFDEBUG Any js here FIDEBUG */
+````
+or
+````js
+/* IFTRUE_yourFlagName ...js code... FITRUE_yourFlagName */
+````
 Start with "/\*IFDEBUG", end with"FIDEBUG\*/", and js code in the center. you can use it any where in js files.     
-(以“/\*IFDEBUG”开头，以“FIDEBUG\*/”结尾，中间是js代码。可以用在js文件的任意地方。)
 
-* sample:
-
- 	  $state.go('win', {dir: menu.winId /*IFDEBUG , reload: true FIDEBUG*/})
-	
+* sample -- sorce code:
+````js
+$state.go('win', {dir: menu.winId /*IFDEBUG , reload: true FIDEBUG*/})
+````
 Output for debug:
+````js
+$state.go('win', {dir: menu.winId, reload: true })
+````
 
- 	$state.go('win', {dir: menu.winId, reload: true })
-
 Output of production:
+````js
+$state.go('win', {dir: menu.winId})
+````
 
-	$state.go('win', {dir: menu.winId})
-	
 * sample2:
+````js
+var tx = "This is app /* IFTRUE_Ali of debug FITRUE_Ali */ here";
+````
 
-	  var tx = "This is app /*IFDEBUG of debug FIDEBUG*/ here";
 * sample3:
-
-	  /*IFDEBUG
-	  	alert('Hi~');
-	  FIDEBUG*/
-
+````js
+/*IFDEBUG
+alert('Hi~');
+FIDEBUG*/
+````
 Since it is designed by a js comment style, the code can run normaly even though the js-conditional-compile-loader is not used.    
-(因为采用了js注释的形式，故即使不使用js-conditional-compile-loader，也不影响js代码的运行逻辑。)
 
 ### Setup
+````bash
     npm i -D js-conditional-compile-loader
+````
 
 ### Config in webpack
 You should change webpack config like this:    
-（你需要像这样修改webpack配置:）     
 See this sample: vue-element-ui-scaffold-webpack4(https://github.com/hzsrc/vue-element-ui-scaffold-webpack4)
 
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                include: [resolve('src'), resolve('test')],
-                exclude: file => (
-                    /node_modules/.test(file) && !/\.vue\.js/.test(file)
-                ),
-                use: [
-                    //step-2
-                    'babel-loader?cacheDirectory',
-                    //step-1
-                    'js-conditional-compile-loader',
-                ]
-            },
-            //other rules
-        ]
-    }
-
+````js
+module: {
+    rules: [
+        {
+            test: /\.js$/,
+            include: [resolve('src'), resolve('test')],
+            exclude: file => (
+                /node_modules/.test(file) && !/\.vue\.js/.test(file)
+            ),
+            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 you want, used for /* IFTRUE_myFlag ...js code... FITRUE_myFlag */
+                  }
+                },
+            ]
+        },
+        //other rules
+    ]
+}
+````
 ### options
-- isDebug: {bool = [process.env.NODE_ENV == 'development']}
+- isDebug: {bool = [process.env.NODE_ENV === 'development']}
 
- If isDebug === false, all the codes between "/\*IFDEBUG" and "FIDEBUG\*/" will be removed, otherwise the codes will be remained.     
-（如果isDebug === false，所有"/\*IFDEBUG" 和 "FIDEBUG\*/"之间的代码都会被移除。 其他情况，这些代码则会被保留。）
+ If isDebug === false, all the codes between `/\*IFDEBUG` and `FIDEBUG\*/` will be removed, otherwise the codes will be remained.     
 
+- \[any propertyName\]：{bool}
+if value === false, all codes between `/\* IFTRUE_propertyName` and `FITRUE_propertyName \*/` will be removed, otherwise the codes will be remained.
+
+
 	
+## Samples
+* 1
+```js
+Vue.component('debugInfo', {
+    template: ''
+    /* IFDEBUG
+        + '<pre style="font-size:13px;font-family:\'Courier\',\'Courier New\';z-index:9999;line-height: 1.1;position: fixed;top:0;right:0; pointer-events: none">{{JSON.stringify($attrs.info || "", null, 4).replace(/"(\\w+)":/g, "$1:")}}</pre>'
+    FIDEBUG */
+    ,
+    watch: {
+      /* IFDEBUG
+      curRule (v){
+          this.ruleData = v
+      },
+      FIDEBUG */
+    },
+});
+```
+
+* 2
+```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 */
+
+export default {
+components: {
+  LayoutRun
+},
+}
+```

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

Invalid manifest file

Quality

Package has an invalid manifest file and can cause installation problems if you try to use it.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28748

90.33%

Number of package files

14

40%

Lines of code

79

507.69%

Number of medium quality alerts

0

-100%

Number of lines in readme file

125

71.23%

Worsened metrics

Dev dependency count

2

Infinity%

Number of low maintenance alerts

1

Infinity%

Number of low quality alerts

1

Infinity%

Number of low supply chain risk alerts

3

200%

No dependency changes