Setup
This guide covers Taro get source location via inspect style.
Demo
Step
1
Installation
npm install --save-dev babel-plugin-transform-react-jsx-source-to-style
2
Usage
Important:
Do not enable babel-plugin-transform-react-jsx-source-to-style in product enviroument.
+const plugins = [];
+if (process.env.NODE_ENV === "development") {
+ plugins.push("babel-plugin-transform-react-jsx-source-to-style");
+}
module.exports = {
presets: [
[
"taro",
{
framework: "react",
ts: true,
compiler: "webpack5",
},
],
],
+ plugins: [process.env.NODE_ENV === "development"],
};
Or
module.exports = {
presets: [
[
"taro",
{
framework: "react",
ts: true,
compiler: "webpack5",
},
],
],
+ plugins: [process.env.NODE_ENV === "development" && "babel-plugin-transform-react-jsx-source-to-style"].filter(Boolean),
};
3
Get Source Location Via Inspect Style
You can copy the value of --source-code-location CSS variable, and using editor Go to File... function to open file and jump to the specified line.