【react】---react中使用装饰器
<h1 class="md-end-block md-heading"><span class="md-plain md-expand">一、creact-react-app中使用装饰器</span></h1><ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">此时，项目中多了一个config文件，并且各个配置文件已经暴露出来了。(运行npm run eject之前，保证本地没有待提交到git的文件)</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">安装babel插件</span><span style="font-size: 14px"><span class="md-plain"><code>npm install --save-dev @babel/plugin-proposal-decorators react-app-rewired customize-cra react-scripts @babel/plugin-syntax-jsx </code></span>@babel/helper-create-regexp-features-plugin</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">修改package.json文件的scripts配置项</span></p>
<div class="cnblogs_code">
<pre>"scripts"<span style="color: rgba(0, 0, 0, 1)">: {
</span>-"start": "react-scripts start"<span style="color: rgba(0, 0, 0, 1)">,
</span>+"start": "react-app-rewired start"<span style="color: rgba(0, 0, 0, 1)">,
</span>-"build": "react-scripts build"<span style="color: rgba(0, 0, 0, 1)">,
</span>+"build": "react-app-rewired build"<span style="color: rgba(0, 0, 0, 1)">,
</span>-"test": "react-scripts test"<span style="color: rgba(0, 0, 0, 1)">,
</span>+"test": "react-app-rewired test"<span style="color: rgba(0, 0, 0, 1)">,
}</span></pre>
</div>
<p> </p>
<p class="md-end-block md-p"> </p>
</li>
<li class="md-list-item md-focus-container">
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">修改package.json文件的babel配置项</span></p>
<div class="cnblogs_code">
<pre>"babel"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"plugins"<span style="color: rgba(0, 0, 0, 1)">: [
[</span>"@babel/plugin-proposal-decorators", { "legacy": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">}]
],
</span>"presets"<span style="color: rgba(0, 0, 0, 1)">: [
</span>"react-app"<span style="color: rgba(0, 0, 0, 1)">
]
}</span></pre>
</div>
<p> </p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">在项目的根目录下创建config-overrides.js</span></p>
<div class="cnblogs_code">
<pre>const{ override,addDecoratorsLegacy} =require('customize-cra'<span style="color: rgba(0, 0, 0, 1)">);
module.exports</span>=<span style="color: rgba(0, 0, 0, 1)">override(
addDecoratorsLegacy()
);</span></pre>
</div>
<p> </p>
<p class="md-end-block md-p"> </p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">在项目的根目录下创建jsconfig.json</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"compilerOptions"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"experimentalDecorators": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<p> </p>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/nanianqiming/p/11489096.html
頁:
[1]