我知道UNPKG快速、可靠且免费使用，但如果我过度使用它，会发生什么？
例如，我可以使用rollup而不是webpack将我的整个网站作为UMD构建捆绑到单个 JS，并将其发布为NPM包，如果我使用React或Vue或任何其他 SPA 方法，我需要的 HTML 标记全部运送到生产是这个最少的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Website</title>
<script src="https://unpkg.com/my-whole-website-umd"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
UNPKG 甚至帮助我获取最新版本，这意味着如果我将我的新包发布到 NPM，我正在生产的整个网站都会更新：
<!-- this will always be the latest -->
<script src="https://unpkg.com/my-whole-website-umd"></script>
通过使用这种方法，人们可以节省成千上万的服务器维护费用。
为什么 UNPKG 仍然可以免费？
我想配置 Organize Imports 的订单。
现在，它将与 node_modules 相关的导入语句移动到最顶部，并将本地ts文件移动到最底部：
普通的：
import myFunction from './myFunction';
import fs from 'fs';
console.log(fs)
console.log(myFunction)
运行 Organize Imports 命令后：
import fs from 'fs';
import myFunction from './myFunction';
console.log(fs)
console.log(myFunction)
我想要做的是颠倒顺序，我希望 node_modules 非常底部，本地导入非常顶部。
我怎样才能实现这种行为？
在条纹文档中，我可以轻松创建这样的卡片
var cardElement = elements.create("card");
我只是简单地传递cardElement给confirmCardPayment
stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
payment_method: {
card: cardElement,
},
});
但是，出于视觉样式 css 的原因，我必须cardElement像这样分成三部分：
var cardNumberElement = elements.create("cardNumber");
var cardExpiryElement = elements.create("cardExpiry");
var cardCvcElement = elements.create("cardCvc");
然后我想打电话stripe.confirmCardPayment，我现在该怎么办？
该文档仅显示cardElement方法，没有拆分示例。
我的文件夹结构或代码没有任何问题。
然而，有一次我更改了文件夹名称后，Vetur 一直向我大喊这一消息。
我尝试过以下操作
但问题仍然存在，我该如何解决？
2022 年 8 月更新：
它仍然可以重现，但错误描述可能有所不同；再现：
Example.vue.Example.vue到其他文件中Example.vue为example.vueexample.vue。请参阅此最小示例：
const result = (variableA && !variableB) || !variableA;
在这个表达中，我不能简单地写这个
const result = variableA && !variableB;
因为如果variableA = 0，结果会不一样
const variableA = 0;
const variableB = undefined;
console.log((variableA && !variableB) || !variableA); // true
console.log(variableA && !variableB); // 0
有什么办法可以简化这个表达式吗？
如果我想保存用户的卡以供将来使用，我注意到有两个选项
confirmCardSetup- 这绝对可以节省用户的卡setup_future_usage: "off_session"里面confirmCardPayment- 我刚刚发现，这还可以保存用户的卡Remember This Card 如果我只想有一个复选框供用户在购买时勾选，那么我应该使用哪种方法正确呢？
这两者有什么区别？
请参阅这个最小示例
.inherit {
color: red;
}
.inherit p {
color: inherit;
}
.currentColor {
color: red;
}
.currentColor p {
color: currentColor;
}<div class="inherit">
<p>inherit</p>
</div>
<div class="currentColor">
<p>currentColor</p>
</div>这两个结果是相同的。
当我可以直接使用时，currentColor在属性中使用有什么区别吗？colorinherit
在 JavaScript 中，对象可以选择扩展值，如下所示：
const payload = {
name: "Joseph",
...(isMember && { credential: true })
};
在 React 中，JSX 可以像这样可选地传递 props：
<Child {...(editable && { editable: editableOpts })} />
现在在Vue中，我如何实现可选v-model？
我有一个像这样的文本区域
<Child {...(editable && { editable: editableOpts })} />
如何实现可选绑定v-model？
我想这样做是因为我想在发生错误时在该文本区域上显示警告。
发生错误时，文本区域显示警告并清除输入（v-model）
我写了一个实用程序库，tree-shaking当我的用户使用publishes他们的应用程序时，我想要它们。
在 Webpack v4 中，你需要让你的模块ES6支持tree-shaking，但我也想把 mydevelopment build和 myproduction build分成不同的文件。
我想要的就像 react 的 NPM 模块：
// index.js
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
这让我产生了疑问。
如果我将实用程序模块全部制作出来commonjs，我将永远不会得到tree-shaking，我的应用程序会变得如此庞大。
如果我制作了所有实用程序模块ES6 static export，我将不得不包含development message在production code.
发布两个模块（例如：my-utility和my-utility-es）不会有帮助，因为在开发中，我的代码如下所示：
import { someFunc } from 'my-utility';
但在生产代码中，我将不得不将其更改为：
import { someFunc } from 'my-utility-es'; …请参阅这个最小示例
import Vue from 'vue';
Vue.extend({
data() {
return {
name: 'James',
};
},
methods: {
greet() {
setTimeout(() => {
const componentIsUnmounted = ???; // How do I tell if component is unmounted?
if (!componentIsUnmounted) {
console.log(this.name);
}
}, 300);
},
},
});
正如你所看到的，我有一个带有异步函数的组件，当你调用它时，它会在300ms后被触发，到那时，Vue组件可能会被卸载。
我想我可以通过 Lodash 的函数在全局中存储一个标志来在和uniqueID()处创建一个唯一的 ID 来做到这一点。mounted()beforeDestroyed()
还有另一种更简单的方法吗？