介绍 允许你在 js 代码中新增自定义的标签,并且这个标签内的代码只有在开发环境的时候会编译进去, 在生产环境中不会编译,比如,你需要查看 state 中的变量,但是在生产环境中不需要,你需要一个 工具去帮助你只在开发的时候做些事,它是很好的选择。
安装
npm i jfnode-compile-plugin --save -D
npm i jfsource-helper-plugins --save -D
npm i modify-source-webpack-plugin --save -D
使用
找到 webpack 配置文件webpack.config.js
的 plugins 配置项,新增:
const { ModifySourcePlugin } = require('modify-source-webpack-plugin')
const imageHelper = require('../custom-config/image-helper')
const sourceHelperPlugins = require('../custom-config/source-helper-plugins')
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /\.jsx$/,
modify: (source, filename) => {
return sourceHelperPlugins(source, [
{
plugin: nodesCompile,
options: {
startTarget: '//start',
endTarget: '//end',
env: () => {
return process.env.NODE_ENV === 'production'
}
}
}
])
}
}
]
})
]
options参数说明
-
startTarget
开始标签 -
endTarget
结束标签 -
env
配置该标签里的内容不生效的条件,默认process.env.NODE_ENV === 'production'
时不生效