Browse Source

chore: webpack配置

master
iapyang 5 years ago
parent
commit
eb58c0df26
  1. 35
      babel.config.js
  2. 13
      types/global.d.ts
  3. 61
      typescript/core/decorator/decorator.ts
  4. 8
      webpack/dirs.js
  5. 59
      webpack/webpack.common.js
  6. 50
      webpack/webpack.dev.js
  7. 72
      webpack/webpack.prod.js

35
babel.config.js

@ -0,0 +1,35 @@
module.exports = function (api) {
api.cache(true);
const presets = [
[
"@babel/preset-env",
{
targets: {
ie: 9,
chrome: 47,
},
},
],
"@babel/preset-typescript",
];
const plugins = [
[
"@babel/plugin-proposal-decorators",
{
legacy: true,
},
],
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-block-scoping",
["@babel/plugin-transform-classes", {
loose: true,
}],
"@babel/plugin-transform-proto-to-assign",
// "@babel/plugin-transform-modules-commonjs",
];
return {
presets,
plugins,
};
};

13
types/global.d.ts vendored

@ -0,0 +1,13 @@
interface Obj {
[key: string]: any;
}
// declare let BI: Obj & import("../typescript/index")._BI;
declare let BI: Obj;
declare const Fix: Obj;
declare interface String {
replaceAll(regx: string, callback: (str: string) => void): string;
}

61
typescript/core/decorator/decorator.ts

@ -0,0 +1,61 @@
export type Constructor<T> = new(...args: any[]) => T;
/**
* widget
*/
export function shortcut() {
return function decorator<U>(Target: Constructor<U> & {xtype: string}): void {
BI.shortcut(Target.xtype, Target);
};
}
/**
* model
*/
export function model() {
return function decorator<U extends {new(...args:any[]):{}} & {xtype: string, context?: ReadonlyArray<string>}>(Target: U): void {
BI.model(Target.xtype, Target);
};
}
/**
* _store属性
* @param Model model类
* @param opts
*/
export function store<T>(Model: Constructor<T> & {xtype: string}, opts: { props?(this: unknown): { [key: string]: unknown } } = {}) {
return function classDecorator<U extends {new(...args:any[]):{}}>(constructor:U) {
return class extends constructor {
_store() {
const props = opts.props ? opts.props.apply(this) : undefined;
return BI.Models.getModel(Model.xtype, props);
}
};
};
}
/**
* Model基类
*/
export class Model<U extends {types?: {[key: string]: unknown} | {}, context?: ReadonlyArray<string>} = {}> extends Fix.Model {
// @ts-ignore this["computed"][key]为空
model: Pick<{[key in keyof U["types"]]: U["types"][key]}, U["context"][number]> & {[key in keyof ReturnType<this["state"]>]: ReturnType<this["state"]>[key]} & {[key in keyof this["computed"]]: ReturnType<this["computed"][key]>};
store: this["actions"];
state(): {[key: string]: unknown} | {} {
return {};
}
context: U["context"];
actions:{[key: string]: (...args: any[]) => any};
childContext: ReadonlyArray<keyof (this["computed"] & ReturnType<this["state"]>)>;
// @ts-ignore this["computed"][key]为空
TYPE: Pick<{[key in keyof this["computed"]]: ReturnType<this["computed"][key]>} & {[key in keyof ReturnType<this["state"]>]: ReturnType<this["state"]>[key]}, this["childContext"][number]>;
computed: {[key: string]: () => unknown} | {};
}

8
webpack/dirs.js

@ -0,0 +1,8 @@
const path = require("path");
module.exports = {
DEST: path.resolve(__dirname, "../dist"),
NODE_MODULES: path.resolve(__dirname, "../node_modules"),
PRIVATE: path.resolve(__dirname, "../private"),
BABEL_CONFIG: path.resolve(__dirname, "../babel.config.js"),
TYPESCRIPT: path.resolve(__dirname, "../typescript"),
};

59
webpack/webpack.common.js

@ -0,0 +1,59 @@
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require("autoprefixer");
const dirs = require("./dirs");
module.exports = {
entry: {
fineui: [
"./typescript/index.ts",
],
},
resolve: {
mainFields: ["module", "main"],
extensions: [".js", ".ts"],
},
module: {
rules: [
{
test: /\.(js|ts)$/,
include: [dirs.NODE_MODULES, dirs.PRIVATE, dirs.TYPESCRIPT],
use: [{
loader: "babel-loader",
options: {
configFile: dirs.BABEL_CONFIG,
},
}, {
loader: "source-map-loader",
options: {
enforce: "pre",
},
}],
},
{
test: /\.(css|less)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
},
},
{
loader: "postcss-loader",
options: {
plugins: [autoprefixer],
},
},
{
loader: "less-loader",
options: {
relativeUrls: false,
},
},
],
},
],
},
};

50
webpack/webpack.dev.js

@ -0,0 +1,50 @@
const merge = require("webpack-merge");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const dirs = require("./dirs");
const common = require("./webpack.common.js");
module.exports = merge(common, {
devtool: "eval-source-map",
output: {
path: dirs.DEST,
filename: "[name].[contenthash].js",
},
devServer: {
contentBase: path.join(__dirname, ".."),
port: 9001,
liveReload: true,
},
plugins: [
new MiniCssExtractPlugin({
path: dirs.DEST,
filename: "fineui.[contenthash].css",
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "../index.html"),
chunks: ["fineui"],
chunksSortMode: "manual",
}),
new ForkTsCheckerWebpackPlugin({
watch: ["./typescript"],
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require("cssnano"),
cssProcessorPluginOptions: {
preset: ["default", {
discardComments: {
removeAll: true,
},
normalizeUnicode: false,
}],
},
canPrint: true,
}),
],
});

72
webpack/webpack.prod.js

@ -0,0 +1,72 @@
const webpack = require("webpack");
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const dirs = require("./dirs");
const common = require("./webpack.common.js");
module.exports = merge.smart(common, {
mode: "production",
devtool: "hidden-source-map",
output: {
path: dirs.DEST,
filename: "webpack",
},
plugins: [
new MiniCssExtractPlugin({
path: dirs.DEST,
filename: "plugin.jsondata.es5.css",
}),
new UglifyJsPlugin({
test: /\.js(\?.*)?$/i,
parallel: 16,
sourceMap: true,
uglifyOptions: {
output: {
comments: false,
},
},
}),
new webpack.BannerPlugin({
banner: `time: ${new Date().toLocaleString()}`,
}),
new ForkTsCheckerWebpackPlugin({
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require("cssnano"),
cssProcessorPluginOptions: {
preset: ["default", {
discardComments: {
removeAll: true,
},
normalizeUnicode: false,
}],
},
canPrint: true,
}),
],
module: {
rules: [
{
test: /\.(css|less)$/,
use: [
{
loader: "postcss-loader",
options: {
plugins: [],
},
},
],
},
],
},
});
Loading…
Cancel
Save