@tua-mp/service

    0.3.0 • Public • Published

    @tua-mp/service

    inspired by @vue/cli-service

    Version Next Version License

    介绍

    这个包封装了 webpack 配置,这样业务代码就可以和构建工具隔离,方便单独升级构建工具。

    默认内置了 yaml/css/less/scss/stylus 的支持。

    <!-- 默认 json -->
    <config>
    {
        "navigationBarTitleText": "tua-mp todos",
        "usingComponents": {
            "Todo": "./comps/Todo/Todo",
            "Filter": "/comps/Filter/Filter"
        }
    }
    </config>
    
    <!-- yaml 或者 yml 也支持 -->
    <config lang="yml">
    navigationBarTitleText: 'tua-mp todos'
    usingComponents:
        Todo: ./comps/Todo/Todo
        Filter: /comps/Filter/Filter
    </config>
    
    <!-- 默认 css -->
    <style></style>
    
    <!-- less -->
    <style lang="less"></style>
    
    <!-- scss -->
    <style lang="scss"></style>
    
    <!-- stylus -->
    <style lang="stylus"></style>

    安装

    $ npm i -D @tua-mp/service
    # OR
    $ yarn add -D @tua-mp/service

    基本使用

    安装之后,会在你的项目中的 node_modules/.bin/ 下安装脚本 tua-mp-service,所以你可以使用 npm scripts 或直接在命令行中调用 ./node_modules/.bin/tua-mp-service

    例如在 package.json 中添加以下内容:

    • servewebpack --mode=development -w
    • buildwebpack --mode=production
    {
        "scripts": {
            "start": "tua-mp-service serve",
            "build": "tua-mp-service build"
        }
    }

    然后就可以这样调用:

    # 开发
    npm start
    # OR
    yarn start
    
    # 打包
    npm run build
    # OR
    yarn build

    进阶使用

    除了基础的使用方法,还可以在项目中新建文件 tua.config.js 进行一些自定义配置。

    为了保持兼容性 tua-mp.config.js 也能使用,但还是建议改为 tua.config.js

    简单配置

    最简单的配置方式就是在 tua.config.js 中添加一个对象形式的 configureWebpack 选项。

    // tua.config.js
    module.exports = {
        configureWebpack: {
            plugins: [
                new MyAwesomeWebpackPlugin()
            ],
        },
    }

    这部分的配置最终会通过 webpack-merge 和已有的 webpack 配置合并。

    延迟配置

    假如你想根据当前的环境变量来动态地配置,那么可以传入一个函数,这个函数会将最终配置传入,这样你就可以直接修改配置,或者返回一个对象合并(同上)。

    // tua.config.js
    module.exports = {
        configureWebpack: (config) => {
            if (process.env.NODE_ENV === 'production') {
                // mutate config for production...
            } else {
                // mutate for development...
            }
        },
    }

    链式配置(进阶用法)

    首先在 tua.config.js 中添加一个函数形式的 chainWebpack 选项。

    这个函数会传入一个 webpack-chain 对象,这样你就可以更加细粒度地对内部配置进行任意自定义修改。

    // tua.config.js
    module.exports = {
        chainWebpack: (config) => {
            config.module
                .rule('vue')
                .use('vue-loader')
                    .loader('vue-loader')
                    .tap((options) => {
                        // modify the options...
                        return options
                    })
        },
    }

    Install

    npm i @tua-mp/service

    DownloadsWeekly Downloads

    4

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    33 kB

    Total Files

    22

    Last publish

    Collaborators

    • buptsteve
    • mahongjian