Openfe-spa-cli NPM

Install with npm:

	window: npm config set @ynet:registry=http://flameapp.cn:8081/repository/npm-private/
	mac: npm config set @ynet:registry http://flameapp.cn:8081/repository/npm-private/
	npm install --save-dev @ynet/ynet-cli

Install with yarn:

Introduction

可执行命令与参数

命令说明 以下的命令名均为可项目中可执行命令，你需要在需要中的package.json中的script中指定

	```
		for example: package.json
	
		{
			script: {
				"自定义命名": "ynet-dev"
			}
		}
	
		npm run 自定义命名 --args
	```

	|命令名|描述|
	|:-:|:-----:|
	|ynet-dev|构建本地开发|
	|ynet-common|构建生产环境下的全局资源包|
	|ynet-bundle|建构生产环境下的普通业务包|
	|ynet-zips|建构生产环境下zip压缩文件，可直接上传`mpaas`控制台|
	|ynet-releaseConf|建构生产环境下的bundleID映射关系，以及appList页面启动参数|
	|ynet-sourceZips|源码快速打包成压缩文件|

|参数名|类型|默认值|描述(缩写: --happy => --happy=true)|
|:----:|:--:|:----:|:---------------------------------:|
|platform|String|`liebao`|运行平台|
|env|String|`prod`|项目运行环境，会根据此变量取出对应的环境配置文件,格式为`prod.env.js`|
|appConf|String|`app.conf`|项目配置文件，不指定时则取项目根目录的`app.config.js`文件|
|server|Boolean|`false`|业务包输到指定的目录之后，根据此参数起本地服务，并转换好路径,通过IP地址可访问调试|
|debug|Boolean|`false`|业务包输到指定的目录之后，根据此参数来开启vconsole的调试功能|

项目配置字段说明

说明：配置中的路径均相对项目根目录

	|参数名|类型|默认值|描述|
	|:----:|:--:|:----:|:--:|
	|src|String|`src`|源码目录，指定源码目录之后取目录下的modules用作离线包目录|
	|template|String|`内置模版`|页面模版地址，不指定时则使用内置的默认模版|
	|css|Object|空对象|css loader编译配置, 如：{loaderOptions:{ less:{}, sass:{}, scss: {}, stylus: {} }}|
	|postcssrc|String|内置的postcss.config.js|postcss loader配置项|
	|babel|Object|null|babel 规则配置项，合并|
	|babelrc|String|内置的babel.config.js|babel loader配置项|
	|envConf|String|`config`|项目环境配置文件目录|
	|portalModules|String|`src/portal`|portal工程目录|
	|output|String|`dist`|构建产出物目录|
	|webport|String|13000|dist目录服务端口|
	|configBundleWebpack|Function|null|修改维护bundle模块webpack构建配置, 函数入参为构建前配置项|
	|configPortalWebpack|Function|null|修改维护portal模块webpack构建配置, 函数入参为构建前配置项|
	|devServer|Object|[详情参考官网](https://webpack.docschina.org/configuration/dev-server/)|本地开发模式下本地服务器配置|
	:kiss:
	:smile:
	:alien:
	:scream:  devServer 常用字段有 prot, proxy, publicpath, contentbase

变量说明及webpack扩展配置

node 环境变量

	|变量名|类型|默认值|描述|
	|:----:|:--:|:----:|:--:|
	|process.env.PLATFORM|String|``|运行平台|
	|process.env.DEBUG|Boolean|`undefined`|开启调试模式|
	|process.env.MOCK|Boolean|`undefined`|开启mock模式|

window 环境变量

	|变量名|类型|默认值|描述|
	|:----:|:--:|:----:|:--:|
	|precess.env.PLATFORM|String|``|运行在指定的平台|
	|precess.env.DEBUG|Boolean|`undefined`|开启调试模式|
	|precess.env.MOCK|Boolean|`undefined`|开启mock模式|

config环境配置

	项目根目录可建立config文件夹，其中存放各个环境（环境与命令参数对应，如 --env=prod）的配置信息,如prod.env.js,
	文件内容为各个bundle(默认src/modules目录下各个模块)的对应环境变量配置。

for example:

|config
	|dev.env.js
	|prod.env.js
		{
			"inner_cheetah": {
				"PUBLIC_PATH": '"/inner_cheetah/"'
			},

			//模块目录名称
			"inner_system": {
				"PUBLIC_PATH": '"/inner_system/"'
			}
		}

模块conf.json文件配置项

	文件用于配置当前模块的构建配置项。包含模块名称。构建别名，环境变量定义

for example:

|conf.json
	{
    	"name": "模块中文名称",

		// 构建别名配置
		"alias": {
			"@components": "components"			//注意目录只能为模块下目录
		},

		//构建环境变量配置
		"envConfig":{
			"PUBLIC_PATH": "\"/inner_cheetah/\""
		}
	}

Concepts

Frameworks and library

	|名称|版本|描述|
	|:----:|:--:|:--:|
	|Vue|<img src="https://img.shields.io/badge/vue-v2.6.1-success.svg">|一套用于构建用户界面的渐进式框架|
	|Vuex|<img src="https://img.shields.io/badge/vuex-v3.1.1-success.svg">|Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式|
	|fastclick|<img src="https://img.shields.io/badge/fastclick-v1.0.6-success.svg">|消除移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟|
	|lodash|<img src="https://img.shields.io/badge/lodash-v4.17.11-success.svg">|高性能的 JavaScript 实用工具库,在代码中可直接使用, `import _ from 'lodash'  _.concat()`|

Styling

	|名称|版本|描述|
	|:----:|:--:|:--:|
	|style|<img src="https://img.shields.io/npm/v/style-loader.svg">|Add exports of a module as style to DOM|
	|css|<img src="https://img.shields.io/npm/v/css-loader.svg">|Loads CSS file with resolved imports and returns CSS code|
	|less|<img src="https://img.shields.io/npm/v/less-loader.svg">|Loads and compiles a LESS file|
	|sass|<img src="https://img.shields.io/npm/v/sass-loader.svg">|Loads and compiles a Sass/SCSS file|
	|stylus|<img src="https://img.shields.io/npm/v/stylus-loader.svg">|Loads and compiles a Stylus file|
	|PostCss|<img src="https://img.shields.io/npm/v/postcss-loader.svg">|Loads and transforms a CSS/SSS file using PostCSS|

@infinitebrahmanuniverse/nolb-openf @everything-registry/sub-chunk-2382 @zalastax/nolb-openf

1.0.2

3 years ago

1.0.1

3 years ago