Tuia-milky NPM

milky

milky 做了什么?

milky 做的主要是将各个业务项目中的打包部署配置抽离出来,主要是提取了 webpack 配置的配置。

没有 milky 之前，我们可能会在每个业务项目中写一套 webpack 打包配置，项目结构一般是这样的：

.
├── build     // webpack 配置, 接入milky后这个配置文件需要移除
  ├── build.js
  ├── config.js
  ├── entry.js
  ├── utils.js
  ├── webpack.base.conf.js
  ├── webpack.dev.conf.js
  └── webpack.prod.conf.js
├── config    // 应用端口号
├── html      // html模板
├── mock
├── node_modules
├── package.json
├── router
├── server-dev.js // 本地开发调试 起服务
├── src           // 业务代码
├── static        // 网站图标等静态资源
└── yarn.lock

比较各个业务系统，我们可以发现每个系统中用到的 webpack 配置都是大同小异的，每个系统的发布部署步骤也是统一的，所以考虑将各个系统中的打包配置抽离出来，便于后续统一改动和升级。

下面是milky的内置配置

目前 tuia-milky 支持的命令

1、tuia-milky dev  // 本地开发模式 参考webpack-dev-server

2、tuia-milky build // 打包，输出经webpack打包后的静态资源

3、tuia-milky deploy // 输出deploy目录，供部署后docker服务器使用

目前 tuia-milky 所使用的webpack plugin

1. html-webpack-plugin

2. html-webpack-harddisk-plugin

3. case-sensitive-paths-webpack-plugin

4. hard-source-webpack-plugin (仅在本地开发模式下生效)

5. friendly-errors-webpack-plugin (仅在本地开发模式下生效)

6. oss-webpack-plugin (统一上传插件)

7. terser-webpack-plugin (生产环境打包压缩)

8. progress-bar-webpack-plugin 

9. html-webpack-inject-attributes-plugin

目前 tuia-milky 针对样式文件的默认处理:

less-loader -> postcss-loader -> css-loader(是否开启css module可配置,参考下方) -> style-loader(仅在开发模式下使用，生产环境打包出单独的css文件)

// milky.config.js
{
  theme: {
    lessOptions: {
        modifyVars: {
          'primary-color': '#497fff'  // 项目所用主题色
        }
    },
    cssModules: true, // 默认为true，是否开启css Module
    disableStyleModule: false // 默认为false，是否禁用milky中对样式的默认处理，如有些项目是采用style-loader/useable的方式将样式文件和js文件打包在一起，则需要将milky中默认的样式处理关掉
  },
  webpackConfig: {...}
}

接入步骤

1、安装

yarn add tuia-milky

2、项目根目录下新增配置文件 milky.config.js, 并根据项目中原有webpack配置修改milky.config.js配置文件

一般需要检查如下几点:

webpackConfig.entry 即项目入口所在文件,如src/index.js
webpackConfig.resolve.alias, 即项目中所用到的别名
webpackConfig.resolve.extensions, 如果是ts项目，需要加上ts,如'.ts', '.tsx', '.js', '.jsx'
theme 主题色配置
项目中是否有特殊的webpack plugin配置

3、修改项目 package.json 中的打包部署脚本

// package.json
{
  "scripts": {
    "dev": "yarn && tuia-milky dev --config=milky.config.js",
  }
}

4、修改项目中.gitignore

// .gitignore

deploy // 增加这一行 忽略deploy目录

5、使用可视化代理插件

module.exports = function({ isDev }) {
  return {
    port: 3000,
+    proxyUrl: [
+      {
+        name: '测试',
+        url: 'https://ssp-manager.tuiatest.cn'
+      },
+      {
+        name: '预发',
+        url: 'https://ssp-manager.tuiapre.cn'
+      }
+    ],
    webpackConfig: {
      entry: [],
      module: {...},
      externals: {...},
      resolve: {...},
      devServer: {...}
    }
  }
}

其中proxyUrl接收数组类型，name表示代理的名称，url表示代理的地址

6、使用多场景切换插件

module.exports = function({ isDev }) {
  return {
    port: 3000,
+   openSceneUtils: true,
    webpackConfig: {
      entry: [],
      module: {...},
      externals: {...},
      resolve: {...},
      devServer: {...}
    }
  }
}

在配置文件中新增openSceneUtils并设置为true，然后重启开发服务器，即可在页面上看到

更多关于“多场景切换插件”的内容请查看这里

关于milky开发

使用 prettier 格式化在 vscode settings.json 中配置默认格式化工具

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}