Javascript Vue Typescript组件库-使用Web包和SASS

我目前正在为一家公司构建Vue UI组件库，在这个过程中，我使用webpack作为默认绑定器。我想将整个项目构建到一个npm包中，然后可以通过一个私有的git包存储库进行分发。 软件包发行版已经启动并运行，但我似乎无法以正确的方式导出组件，因此可以在另一个项目中使用

使用的不同工具的版本：

npm:6.14.4

节点：12.17.0

纱线：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" } 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"
        }
      ]
    }
  }
};

const settings = {
  theme: {},
  variants: {},
  plugins: []
};

if (process.env.NODE_ENV === "production") {
  settings.purge = ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"];
}

module.exports = settings;

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; 

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");

tailwind.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"
        }
      ]
    }
  }
};

const settings = {
  theme: {},
  variants: {},
  plugins: []
};

if (process.env.NODE_ENV === "production") {
  settings.purge = ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"];
}

module.exports = settings;

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; 

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");

src/index.ts

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"
        }
      ]
    }
  }
};

const settings = {
  theme: {},
  variants: {},
  plugins: []
};

if (process.env.NODE_ENV === "production") {
  settings.purge = ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"];
}

module.exports = settings;

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; 

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");

main.ts

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"
        }
      ]
    }
  }
};

const settings = {
  theme: {},
  variants: {},
  plugins: []
};

if (process.env.NODE_ENV === "production") {
  settings.purge = ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"];
}

module.exports = settings;

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; 

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");

如果我需要发布更多的文件，请不要犹豫。 当我将所有这些捆绑起来，并将其包含在一个项目中，如从“@livebackend/ui”导入{LbButton}时，我得到一个错误，告诉我vue找不到类型声明或模块。然后，当我尝试从

“@livebackend/ui/src”

导入它时，我收到另一个错误，告诉我vue无法理解“@”的含义。我使用“@”查找项目中的相关模块

---

以前有没有人遇到过这些问题？

我也在搜索相同的信息，发现了这个问题，我尝试了许多repo和博客/教程，这是迄今为止我找到的最好的解决方案，但我会在使用更长时间后更新这个答案。我昨天刚刚开始，我正在一个接一个地把功能放在那里，看看我是否击中了什么东西

编辑：2020年11月2日

我不得不把

configureWebpack: {
  resolve: {
      alias: {
        vue: path.resolve("./node_modules/vue")
      }
    }
}

要解决此问题，请执行以下操作：$listeners是只读的。

参考：