README-en-GB.md

onex-utils ·

简体中文 | English

Some business functions written in the process of precipitation business development and some implementation schemes are adopted to avoid code duplication between multiple warehouses in the process of business development, and to carry out long-term maintenance and iteration in this warehouse that has accumulated some capabilities during business development. Document address: click me

1. Project command

• npm run start Project start command
• npm run build Project build command
• npm run commit Use this command to submit code
• npm run lint Check the css style sheet and ts code format. If there is a problem with the rules, please contact the project developer to change

2. General ability

• Annotation specification
• Document generation
• Project test
• TS tool type

3. How to use

⚠️ ‼️ Used in online business where non-onex-utils maintainers participate. To ensure stability, it is recommended to use the locked version

1) Via npm

install:

$ npm install onex-utils --save

usage：

import { type } from 'onex-utils';

console.log(type.isTrue('true')); // true

2) Via CDN ·

install:

<script src="https://cdn.jsdelivr.net/npm/onex-utils@latest/dist/index.umd.min.js"></script>

usage:

console.log(onexUtils.type.isTrue('true'));

4. Engineering plugin

1) babel-plugin-onex-utils (babel、webpack)

➡️ CLICK ME

Install

$ npm i --save onex-utils
$ npm i --save-dev babel-plugin-onex-utils @babel/cli @babel/preset-env

Example

Transforms

import { capitalize, map } from 'onex-utils';

map([], capitalize);

roughly to

"use strict";

var _map2 = _interopRequireDefault(require("onex-utils/build/utils/map"));

var _capitalize2 = _interopRequireDefault(require("onex-utils/build/utils/capitalize"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

(0, _map2["default"])([], _capitalize2["default"]);

Usage

.babelrc

{
  "plugins": ["onex-utils"],
  "presets": [["@babel/env", { "targets": { "node": 6 } }]]
}

Babel API

require('babel-core').transform('code', {
  'plugins': ['onex-utils'],
  'presets': [['@babel/env', { 'targets': { 'node': 6 } }]]
})

webpack.config.js

'module': {
  'loaders': [{
    'loader': 'babel-loader',
    'test': /\.js$/,
    'exclude': /node_modules/,
    'query': {
      'plugins': ['onex-utils'],
      'presets': [['@babel/env', { 'targets': { 'node': 6 } }]]
    }
  }]
}

2) build-plugin-onex-utils（build-scripts）

➡️ CLICK ME

Install

$ npm install @alib/build-scripts build-plugin-utils build-plugin-component --save-dev 

Usage(Used in conjunction with rax)

build.json

{
  "type": "rax",
  "targets": [
    "web"
  ],
  "plugins": [
    "build-plugin-component",
    "build-plugin-onex-utils"
  ]
}

package.json

{
  "main": "build/index.js",
  "types": "./lib",
  "files": [
    "dist",
    "es",
    "lib"
  ],
  "scripts": {
    "build": "build-scripts build"
  }
}

cli

$ npm run build

5. Common problem

1) The toolkit was introduced, causing undefined error

CLICK ME

code:

import onexUtils from 'onex-utils';
console.log(onexUtils.url);

error:

Modification method：

1. If it is a JS project, import it through the import method of namescpae

import * as onexUtils from 'onex-utils';

1. If it is a ts file, solve the build problem by configuring tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
  }
}