{"id":23409018,"url":"https://github.com/wjsjtu/comment-loader","last_synced_at":"2025-08-19T15:07:52.782Z","repository":{"id":57204094,"uuid":"80904805","full_name":"WJsjtu/comment-loader","owner":"WJsjtu","description":null,"archived":false,"fork":false,"pushed_at":"2017-02-04T12:29:04.000Z","size":8,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-11T16:57:04.841Z","etag":null,"topics":["comment","loader","macros","precompiling","tree-shaking","wepback"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WJsjtu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-04T08:12:33.000Z","updated_at":"2017-02-04T12:47:26.000Z","dependencies_parsed_at":"2022-09-17T19:11:34.944Z","dependency_job_id":null,"html_url":"https://github.com/WJsjtu/comment-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WJsjtu/comment-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WJsjtu%2Fcomment-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WJsjtu%2Fcomment-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WJsjtu%2Fcomment-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WJsjtu%2Fcomment-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WJsjtu","download_url":"https://codeload.github.com/WJsjtu/comment-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WJsjtu%2Fcomment-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271173352,"owners_count":24711667,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comment","loader","macros","precompiling","tree-shaking","wepback"],"created_at":"2024-12-22T15:19:32.606Z","updated_at":"2025-08-19T15:07:52.759Z","avatar_url":"https://github.com/WJsjtu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# comment-loader\nA wepback loader using comment to do precompilation work.\n\n###Install\n`npm install --save-dev comment-loader`\n\n###Why we need it?\nConditional code is not allowed in ES6+, this means you cannot use `if-else` or `switch-case` structure to enable/disable some modules.\nHowever if some precompilation work can be performed before webpack pass your code to babel or other ES transformers, the problem can be solved easily.\nMacro like C-style macro can be a way to do all this.\n\n###What different?\nSome Macro loaders can already be found on github or npm. However, they usually cause some side-effects. Using Macro directly will break the syntax which will cause big problem if the loader is not available.\n\nHere I use the hack on comments and `babylon` parser to detect the define Macro. Using comments is a way to lower the side-effects as many as possible, though it still bother IDE sometimes.\nComments are not force to be at the beginning of the line, since `babylon` can always detect AST correctly. Another important reason why I use `babylon` is that I hope the comments can do more in future. Maybe I'll let loader support simple  `if-else` or `switch-case` structures in comments with some defined patterns.\n\n###When to use it?\nHere is an example of developing app with redux.\n\n```\nimport {createStore, compose} from 'redux';\nimport rootReducer from '../reducers';\nimport {persistState} from 'redux-devtools';\nimport DevTools from '../containers/DevTools';\n\nconst enhancer = compose(\n    DevTools.instrument(),\n    persistState(\n        window.location.href.match(\n            /[?\u0026]debug_session=([^\u0026#]+)\\b/\n        )\n    )\n);\n\nexport default function configureStore(initialState) {\n\n    return createStore(rootReducer, initialState, process.env.NODE_ENV === 'production' ? undefined : enhancer);\n\n}\n```\n`redux-devtools` is very useful when developing apps, however it only use `WebpackDefine` plugin can have great problem when build bundles.`WebpackDefine` works after `babel-loader`but before `uglify` which means the modules are already bundled together before the `WebpackDefine` plugin works.\n\nThis problem in this [issue](https://github.com/webpack/webpack/issues/2061) is almost the same. The tree shaking won't work because building modules is performed before removing dead code. Webpack can mark unused imports/exports, maybe this is also possible for the issue by some ways like simply marking the statements and specifiers. But in my case, I think it is impossible. If an analyzer can tell `enhancer` is no longer used when `process.env.NODE_ENV === 'production'`, and it cannot tell whether `compose` use it or not.\nIf recursive detection can be performed, it must be a time consuming work.\n\nI now think these kind of use `WebpackDefine` plugin is a mistake, especially when the variables defined are related to the module dependency. So I don't think `Webpack` should focus on this kind of problem.\n\nThis loader allows you to write code like below:\n```\nimport {createStore, compose} from 'redux';\nimport rootReducer from '../reducers';\n\n//\u003c#IF_DEF DEBUG\u003e\nimport {persistState} from 'redux-devtools';\nimport DevTools from '../containers/DevTools';\n\nconst enhancer = compose(\n    DevTools.instrument(),\n    persistState(\n        window.location.href.match(\n            /[?\u0026]debug_session=([^\u0026#]+)\\b/\n        )\n    )\n);\n\n//\u003c#END_IF\u003e\n\n\nexport default function configureStore(initialState) {\n\n    let store;\n\n    //\u003c#IF_DEF DEBUG\u003e\n\n    store = createStore(rootReducer, initialState, enhancer);\n\n    //\u003c#ELSE\u003e\n\n    store = createStore(rootReducer, initialState);\n\n    //\u003c#END_IF\u003e\n    return store;\n\n}\n```\nThe `\u003c#IF_DEF DEBUG\u003e` , `\u003c#ELSE\u003e` and `\u003c#END_IF\u003e` are all needed.\n\n###How to use?\nWebpack config file.\n\n```\nmodule: {\n        rules: [\n            {\n                test: /\\.js$/,\n                include: [\n                    path.resolve(__dirname, '../src')\n                ],\n                exclude: [\n                    path.resolve(__dirname, '../node_modules')\n                ],\n                use: [\n                    {\n                        loader: 'babel-loader'\n                    },\n                    {\n                        loader: 'comment-loader',\n                        options: {\n                            definition: ['DEBUG']//['RELEASE']\n                        }\n                    },\n                ]\n            }\n        ]\n}\n```\n\u003eNote: You should always put `comment-loader` on the right of `babel-loader` or other loaders.\n\u003e`babel-loader` will mess up the comments between `import` lines thus making macros invalid.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwjsjtu%2Fcomment-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwjsjtu%2Fcomment-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwjsjtu%2Fcomment-loader/lists"}