English | 简体中文

Desciratioin

Pack multiple modular js/ts files into one js file, and this file can be directly imported by html

Currently, mainstream projects are mostly developed using vue, race, etc. Because of the relatively high degree of integration, users do not need to consider other factors when editing in a modular manner, but only need to focus on their own business.

However, in actual projects, not all projects need to use vue/react, etc., or they may be imported only through the script tag of html. However, html does not support import/require syntax

Therefore, this module is mainly dedicated to: When ordinary projects adopt modular editing, the modular files are packaged into a unified export file, and can be directly called and used through the html script tag

Installation

• npm

  npm install pks-cli

• yarn

  yarn add pks-cli

Quick Start

# development
npm run dev

# publish
npm run build

Directory Structure

You Project
├─build                   // config
│   ├─webpack.common.js   // general config
│   ├─webpack.dev.js      // dev config
│   └─webpack.prod.js     // prod config
├─dist                    // dist
├─examples                // examples
├─publish
├─src                     // source
└─test

Usage

# script
<script src="./js/pks-cli-alpha.js"></script>
<script>
bujidao.jsFile.jsFunc('JS有一直小毛驴');
// Js say: this is a function, i just want to tell you: JS有一直小毛驴

bujidao.tsFile.tsFunc('ts has a maolv')
// Ts say: this is a function, i just want to tell you: ts has a maolv
</script>

Note: bujidao in the code is the default library name of the framework, and import your module through this name.

Of course, you can also change to your own library, such as mylib, for specific operations see details

Use a custom library name

The default library name of the project is bujidao, you may prefer to use your own library name, for example, if you want to use mylib as your project name

Specific operation:

library directory: build/webpack.prod.js

Change the value of output/library to mylib

Then in your project (html->script), print it to see all the modules you defined

console.log(mylib)

Use custom output file name

The default output name of the project is:

• Development mode: pks-cli-alpha.js
• Production mode: pks-cli-1.0.0.js

In actual projects, you may prefer your own name, for example, you want to use myscript as your name

Specific operation:

Project root directory package.json, modify name to myscript

License

Copyright (c) 2017-present Alex Ceng