@megalo/env-plugin

    1.0.1 • Public • Published

    megalojs-env-plugin

    为megalo-cli创建的工程提供模式设置、环境变量

    使用指南

    安装:

    $ npm i @megalo/env-plugin

    webpack 配置:

    const EnvPlugin = require('@megalo/env-plugin')
    const EnvPluginInstance = new EnvPlugin()
    
    ...
    
    // The webpack 'plugins' options
    module.exports = {
        // ...
        plugins: [
            EnvPluginInstance
        ]
    }

    在项目根目录下新建 .env.模式名 文件,在 package.jsonscripts 里加入一条cli命令:

    "dev:wechat": "node ./build/megalo-cli.js --mode development --platform wechat",

    然后执行:

    $ npm run dev:wechat

    控制台参数

    --mode

    默认值是 development , 本库内置了三个模式 development、test、production ,其中 development 模式下 process.env.NODE_ENV 的值是 development ,webpack将启用开发模式,监听你的项目文件修改,每次保存都会重新编译代码,自动刷新

    三个内置的模式 development、test、production 对应的 process.env.NODE_ENV 值是和模式的名字一模一样,但只有 development 模式会启动webpack的开发模式

    你可以自定义模式名,但 process.env.NODE_ENV 的值都将是 production ,webpack将启用生产模式,除了编译代码外,还会压缩混淆你的代码

    如果你希望其它模式也能启用webpack的开发模式,你可以在你的 .env.模式 文件中设置如下值:

    // 注意:NODE_ENV的值不可随意更改,只能是 `development、test、production` 中的任一个
    NODE_ENV=development

    --platform

    默认值是 wechat , 目前在 megalo 工程中支持三个平台的值: wechat、alipay、swan ,你可以在nodejs中或者项目中通过 process.env.PLATFORM 访问到它

    配合 @megalo/target 插件, 将根据你传的 --platform 参数来编译成不同平台的小程序代码

    详细文档

    点击这里查看,功效和vue-cli3的环境变量和模式一致

    原理说明

    根据用户执行cli命令时,传递的 mode 参数,读取指定目录下(默认项目根目录)的 .env 文件内的键值对,注入到Nodejs的环境变量对象 process.env 身上,然后通过 webpack.DefinePlugin 插件,替换项目中写的 process.env.xxx.env 文件配置的值

    megalo-demo举例:

    // cli 命令
    "dev:wechat": "node ./build/megalo-cli.js --mode development --platform wechat"

    这条cli命令的 mode 参数值是 development,我们将读取项目根目录下的 .env.development 文件

    假设你的 .env.development 文件里配置了如下内容:

    VUE_APP_API=http://dev.api.com
    API2=http://dev.api2.com
    

    程序默认将读取其中以 VUE_APP_ 开头的键名(可修改过滤规则),将其注入到Node环境变量中,你可以在项目中使用 process.env.VUE_APP_API 来访问你配置的值

    打开编译后代码,你会发现程序已经将你写的 process.env.VUE_APP_API 替换成了 'http://dev.api.com'

    本库并不限于 megalo 专用, webpack4的脚手架均可使用

    Install

    npm i @megalo/env-plugin

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    160 kB

    Total Files

    9

    Last publish

    Collaborators

    • dequan
    • elcarim5efil
    • fengzilong
    • zwwill
    • iuiaoin
    • zhuping.zp
    • xsasadasdasdasd
    • shenbin
    • llwanghong
    • bigdogaaa