- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在为一家公司构建 Vue UI 组件库,在此过程中,我使用 webpack 作为默认的打包器。我想将整个项目构建到一个 npm 包中,然后可以通过私有(private) git 包存储库进行分发。包分发已启动并正在运行,但我似乎无法以正确的方式导出组件,因此可以在另一个项目中使用。
所用不同工具的版本:
npm:6.14.4
节点:12.17.0
yarn :1.22.0
@vue/cli: 4.4.1
tsc: 3.9.5
项目结构如下:
public
src
- assets
| - css
| | - tailwind.css
| - fonts
| | - stylesheet.css
- component
| - LbButton
| | - LbButton.vue
| | - index.ts
| - Lbtag
| | - LbTag.vue
| | - index.ts
| - ...
- theme
| - index.ts
| - Theme.ts
- typedefs
| - types.ts
| - events.ts
| - model.ts
| - states.ts
- views
| - Home.vue
- App.vue
- index.ts
- main.ts
- plugin.ts
- shims-vue.d.ts
vue.config.js
tailwind.config.js
tsconfig.json
postcss.config.js
babel.config.js
package.json
当前设置包含以下配置:
package.json
... "main": "./dist/@livebackend/ui.common.js", ... "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --target lib --name @livebackend/ui src/index.ts ", "test:unit": "vue-cli-service test:unit" }, "files": [ "dist/*", "src/*", "public/*", "*.json", "*.vue", "*.ts", "*.js" ], "dependencies": { "@kazupon/vue-i18n-loader": "^0.5.0", "@types/lodash": "^4.14.152", "@types/vue-i18n": "^7.0.0", "@types/vue-select": "^2.5.0", "core-js": "^3.6.4", "date-fns": "^2.14.0", "lodash": "^4.17.15", "v-calendar": "^1.0.6", "vue": "^2.6.11", "vue-class-component": "^7.2.3", "vue-i18n": "^8.18.1", "vue-infinite-loading": "^2.4.5", "vue-property-decorator": "^8.4.1", "vue-select": "^3.10.3", "vuex": "^3.1.3", "vuex-class": "^0.3.2" }, "peerDependencies": { "@vue/composition-api": "^0.6.7" }, "devDependencies": { "@types/chai": "^4.2.11", "@types/mocha": "^5.2.4", "@vue/cli-plugin-babel": "~4.3.0", "@vue/cli-plugin-typescript": "~4.3.0", "@vue/cli-plugin-unit-mocha": "~4.3.0", "@vue/cli-plugin-vuex": "~4.3.0", "@vue/cli-service": "~4.3.0", "@vue/composition-api": "^0.6.7", "@vue/test-utils": "1.0.0-beta.31", "chai": "^4.1.2", "node-sass": "^4.14.1", "sass": "^1.26.5", "sass-loader": "^8.0.2", "style-loader": "^1.2.1", "tailwindcss": "1.4.6", "ts-loader": "^7.0.5", "typescript": "~3.9.5", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.11" }, "version": "0.4.8"}
tsconfig
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"declaration": true,
"importHelpers": true,
"moduleResolution": "node",
"noImplicitAny": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.vue"
],
"files": [
"src/vue-shims.d.ts"
],
"exclude": [
"node_modules"
]
}
vue.config.js
module.exports = {
publicPath: "./src",
devServer: {
proxy: "http://localhost:3000"
},
chainWebpack: config => {
config.plugins.delete("optimize-css");
},
configureWebpack: {
module: {
rules: [
{
resourceQuery: /blockType=i18n/,
type: "javascript/auto",
loader: "@kazupon/vue-i18n-loader"
}
]
}
}
};
tailwind.config.js
const settings = {
theme: {},
variants: {},
plugins: []
};
if (process.env.NODE_ENV === "production") {
settings.purge = ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"];
}
module.exports = settings;
src/index.ts
export { default as Theme } from "./theme";
export { default as LbButton } from "./components/lbButton";
export { default as LbInputField } from "./components/lbInputField";
export { default as LbIconButton } from "./components/lbIconButton";
export { default as LbTag } from "./components/lbTag";
export { default as LbCard } from "./components/lbCard";
export { default as LbFB } from "./components/lbFB";
export { default as LbDatePicker } from "./components/lbDatePicker";
export { default as LbRadio } from "./components/lbRadio";
export { default as LbLoading } from "./components/lbLoading";
export { default as LbSlider } from "./components/lbSlider";
export { default as LbSwitch } from "./components/lbSwitch";
export { default as LbTable } from "./components/lbTable";
import plugin from "./plugin";
export default plugin;
main.ts
import Vue from "vue";
import VueI18n from "vue-i18n";
import vSelect from "vue-select";
import VCalendar from "v-calendar";
import "@/assets/css/tailwind.css";
import "@/assets/fonts/stylesheet.css";
import "vue-select/dist/vue-select.css";
import InfiniteLoading from "vue-infinite-loading";
import App from "./App.vue";
import messages from "./tranlations";
Vue.config.productionTip = false;
Vue.component("v-select", vSelect);
Vue.use(VCalendar, {
componentPrefix: "v"
});
Vue.use(VueI18n);
Vue.use(InfiniteLoading);
const i18n = new VueI18n({
locale: "en",
messages
});
new Vue({
i18n,
render: h => h(App)
}).$mount("#app");
如果我需要发布更多文件,请随时询问。当我将所有这些捆绑起来并将其包含在像 import { LbButton } from "@livebackend/ui"
这样的项目中时,我收到一条错误消息,告诉我 vue 找不到类型声明或模块。然后,当我尝试从 "@livebackend/ui/src"
导入它时,我收到另一个错误,告诉我 vue 无法弄清楚“@”是什么意思。我使用“@”在项目中查找相关模块。
有没有人以前遇到过这些问题?
最佳答案
我也在搜索相同的信息并发现了这个问题,我尝试了很多 repo 和博客/教程和 https://github.com/team-innovation/vue-sfc-rollup是迄今为止我找到的最好的解决方案,但是一旦我使用它的时间更长,我就会更新这个答案。我昨天才开始,我正在将特征一个一个地放在那里,看看我是否击中了什么。
编辑:2020 年 11 月 2 日
我不得不把
configureWebpack: {
resolve: {
alias: {
vue: path.resolve("./node_modules/vue")
}
}
}
修复问题[Vue warn]: $listeners is read-only.
引用:https://github.com/team-innovation/vue-sfc-rollup/issues/26
关于javascript - Vue Typescript 组件库 - 使用 Webpack 和 SASS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62594333/
我已经写了并且 npm 发布了这个:https://github.com/justin-calleja/pkg-dependents 现在我正在用 Typescript 编写这个包:https://g
我有一个函数,我想在 TypeScript 中模拟它以进行测试。在我的测试中,我只关心 json和 status .但是,当使用 Jest 的 jest.spyOn 时我的模拟函数的类型设置为返回 h
我正在使用一个库 (Axios),它的包中包含 Typescript 声明。 我想声明一个将 AxiosResponse(在库的 .d.ts 文件中声明)作为参数的函数。我有以下内容: functio
我是 Typescript 的新手。我想使用 将一个 Typescript 文件加载到另一个 Typescript 文件中标签。 我做了一些事情,但它不起作用!请帮助我。 first.ts: imp
为什么我会收到下面屏幕截图中显示的错误? Atom 说我的 tsconfig.json“项目文件包含无效选项”用于 allowJs、buildOnSave 和 compileOnSave。 但是应该允
所以我正在创建一个 TypeScript 库,我可以轻松地将所有生成的 JS 文件编译成一个文件。有没有办法将所有 .ts 和 .d.ts 编译成一个 .ts 文件? 除了支持 JS 的版本(较少的智
Microsoft Research 提供了一种名为Safer TypeScript 的新 TypeScript 编译器变体: http://research.microsoft.com/en-us/
我需要这个来在单个文件中分发 TypeScript 中的库。有没有办法将多个 typescript 文件合并到(一个js文件+一个 typescript 定义)文件中? 最佳答案 要创建一个库,您可以
用例:我想知道一个函数在 typescript 中执行需要多少时间。我想为此目的使用装饰器。我希望装饰器应该返回时间以便(我可以进一步使用它),而不仅仅是打印它。 例如: export functio
我想检查一个类型是否可以为 null,以及它是否具有值的条件类型。 我尝试实现 type IsNullable = T extends null ? true : false; 但是好像不行 type
我的问题是基于这个 question and answer 假设我们有下一个代码: const myFn = (p: { a: (n: number) => T, b: (o: T) => v
我知道双重否定前缀,我知道 TypeScript 的单后缀(非空断言)。 但是这个双后缀感叹号是什么? /.*验证码为(\d{6}).*/.exec(email.body!!)!![1] 取自here
我正在使用以下文件结构在 Webstorm 中开发一个项目 | src | ... | many files | types | SomeInterface |
在 TypeScript 类中,可以为属性声明类型,例如: class className { property: string; }; 如何在对象字面量中声明属性的类型? 我试过下面的代码,但它
我正在寻找一种在不丢失推断类型信息的情况下将 TypeScript 中的文字值限制为特定类型的好方法。 让我们考虑一个类型Named,它保证有一个名字。 type Named = { name:
在 TypeScript 中,我想创建一个联合类型来表示属于一个或多个不同类型的值,类似于 oneOf在 OpenAPI或 JSON Schema .根据a previous answer on a
type Func = (foo:string) => void // function expression const myFunctionExpression:Func = function(f
假设我有一个联合类型,我正在使用类似 reducer 的 API 调用模式,看起来像这样: type Action = { request: { action: "create
我在 typescript 中有以下去抖功能: export function debounce( callback: (...args: any[]) => void, wait: numb
在 Vue3 的 defineComponent 函数中,第一个泛型参数是 Props,所以我在这里使用 Typescript 接口(interface)提供我的 props 类型。喜欢: expor
我是一名优秀的程序员,十分优秀!