uniapp-import-loader's Introduction

uniapp-import-loader

uniapp import on demand loader 解决uniapp发布为npm包时组件与页面都使用TS装饰器写时无法成功编译组件的问题。

$ yarn add -D uniapp-import-loader

webpack-loader

webpack-loader的解决方案，与babel-plugin解决方案二选一，需要配置vue.config.js，详细配置可以查看https://github.com/SHST-SDUST/SHST-PLUS/blob/master/vue.config.js。

// vue.config.js
const path = require("path");

module.exports = {
    configureWebpack: {
        // ...
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: "uniapp-import-loader", 
                    // import { CCard } from "shst-campus"; 
                    // => import CCard from "shst-campus/lib/c-card/c-card";
                    options: {
                        name: "shst-campus",
                        path: "lib",
                    },
                },
            ],
        },
        // ..
    },
};

babel-plugin

babel-plugin的解决方案，与webpack-loader解决方案二选一，需要配置babel.config.js，详细配置可以查看https://github.com/SHST-SDUST/SHST-PLUS/blob/master/babel.config.js。

// ...
process.UNI_LIBRARIES = ["shst-campus"];
plugins.push([
    require("uniapp-import-loader/dist/babel-plugin-dynamic-import"),
    {
        libraryName: "shst-campus",
        libraryPath: "lib",
    },
    // import { CCard } from "shst-campus";
    // => import CCard from "shst-campus/lib/c-card/c-card";
]);
// ...

Recommend Projects