c语言 插件化开发,工程化插件/组件开发

webpack打包配置 和入口文件设置

webpack打包，lib文件下生成压缩文件和非压缩文件

const TerserPlugin = require("terser-webpack-plugin");

const path = require("path");

module.exports = {

mode: "none",

entry: {

"plugin": "./src/components/Form.js",

"plugin.min": "./src/components/Form.js",

},

output: {

filename: "[name].js",

library: "plugin", // 打包暴露出去库的名称

libraryExport: "default", //

libraryTarget: "umd", // var | this | global | window | umd | commonJS

path: path.join(__dirname, "lib")

},

module: {

rules: [

{

test: /\.js?$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

},

}

],

},

/** umd */

optimization: {

minimize: true,

minimizer: [

new TerserPlugin({ // production下默认开启 ugifyPlugin碰到es6打包会出错，而他不会

include: /\.min.js$/,

})

]

}

}

npm 入口文件的配置

package下"main": "index.js"

// 根据环境选择打包生成的压缩文件和源文件暴露模块

let exportPlugin = {};

if (process.env.NODE_ENV === "production") {

exportPlugin = require("./lib/rcFormSimple.min.js");

} else {

exportPlugin = require("./lib/rcFormSimple.min.js");

}

module.exports = exportPlugin;

代码提示Typing和@types

package.json下"typings": "typings/index.d.ts"

// 假设ReactUI组件

// 模块定义，能暴露的模块

//

declare module "react-UI" {

export import Table = ReactUI.Table;

export import Input = ReactUI.Input;

.....

}

declare namespace ReactUI {

interface TableColumn {

label?: string

prop?: string

property?: string

type?: string

minWidth?: number

width?: number

align?: string

sortable?: boolean

sortMethod?: () => void

resizable?: boolean

formatter?: () => void

selectable?: boolean

fixed?: boolean | string

filterMethod?: () => void

filters?: Object[]

render?: (data? :Object, column? :Object, index? :number) => void

}

interface TableProps extends ElementReactLibs.ComponentProps {

columns?: TableColumn[]

data?: Object[]

height?: number

stripe?: boolean

border?: boolean

fit?: boolean

rowClassName?(row?, index?): void

style?: Object

highlightCurrentRow?: boolean

onCurrentChange?(): void

onSelectAll?(): void

onSelectChange?(): void

}

export class Table extends ElementReactLibs.Component { }

........................................

}

单元测试

1.mocha是要求全局安装的，那么： npm install -g mocha

mocha测试基本使用·

var assert = require("should")

, request = require('request')

, settings = require('../settings');

describe('Web Service', function () {

describe('/', function () {

it('should return html content', function (done) {

request(settings.webservice_server, function (error, response, body) {

if (error) throw error;

response.should.status(200).html;

done();

});

});

});

describe('/products', function () {

it('should return an array of products', function (done) {

request(settings.webservice_server + '/products', function (error, response, body) {

if (error) throw error;

response.should.status(200).json;

response.body.should.not.empty;

var products = JSON.parse(response.body);

products.should.be.an.instanceOf(Array);

done();

});

});

});

});

可持续化集成

.travis.yml配置；

language: node_js

node_js:

- "10"

env:

- TRAVIS_CI=1

cache:

yarn: true

directories:

- node_modules

install:

npm i

script:

- npm run lint

- npm run build

- npm test

- npm run typescript-test

notifications:

slack: eleme:3Nouwh5OgNugxccCsiFYpUIB

sourcemap