美文网首页
npm自定义命令打包版本

npm自定义命令打包版本

作者: _赵开心_ | 来源:发表于2019-10-16 15:35 被阅读0次

    问题

    目前手头上的项目要分test环境,qa环境,生产环境,需要根据不同的环境进行项目打包。
    参考其他人的项目,可以使用 yargs 插件来识别命令行打包。

    准备

    npm install yargs --save 下载 yargs 插件并保存到 package.json 中。

    配置

    /config 文件夹下创建出对应的配置文件,以要打包test环境的项目包为例,在 /config 下创建出test.env.js文件,内容如下:

    'use strict'
    module.exports = {
      NODE_ENV: JSON.stringify('test'),
      // 配置所有后端请求的url前缀地址
      baseURL: JSON.stringify('http://110.110.110.110:8808'),
      // 自定义通用配置,在组件内可以直接引用,如:
      returnURL: JSON.stringify('http://110.110.110.110:8808/first.html')
    }
    

    /config文件下配置完成之后,在/build文件夹下创建webpack.test.conf.js,并复制默认的webpack.prod.conf.js里的内容,修改如下部分:

    ...
    
    const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
    // 修改路径,对应在config文件夹中新创建的test.env.js
    const env = require('../config/test.env')  
    
    const webpackConfig = merge(baseWebpackConfig, {
      module: {
        rules: utils.styleLoaders({
        ...
        ...
    

    build.js 文件中添加:

    // 对webpack.base.config中的publicPath生效
    // publicPath将根据NODE_ENV决定用的是index.js中module.exports的dev还是build
    process.env.NODE_ENV = 'production'
    // 引用了 yargs 插件,添加这部分配置,自动根据profile找到对应的webpack配置文件
    const argv = require('yargs').argv
    const profile = argv.env || 'dev'
    

    最后去package.json文件中修改script部分,写好打包命令:

    ...
    ...
    "scripts": {
    // dev环境本地部署命令
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env dev",
        "qa": "webpack-dev-server --inline --progress --config build/webpack.qa.conf.js --env qa",
        // test环境本地部署命令
        "test": "webpack-dev-server --inline --progress --config build/webpack.test.conf.js --env test",
        // 生产环境本地部署命令
        "prod": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js --env prod",
        "lint": "eslint --ext .js,.vue src",
        "build:dev": "node build/build.js --env dev",
        "build:qa": "node build/build.js --env qa",
        // test 打包
        "build:test": "node build/build.js --env test",
        // 生产打包
        "build:prod": "node build/build.js --env prod"
      },
    ...
    ...
    

    运行

    以上面的test为例:

    本地运行:npm run test

    项目打包:npm run build:test

    相关文章

      网友评论

          本文标题:npm自定义命令打包版本

          本文链接:https://www.haomeiwen.com/subject/bulumctx.html