Skip to content

Latest commit

 

History

History
288 lines (260 loc) · 8.29 KB

项目常用配置.md

File metadata and controls

288 lines (260 loc) · 8.29 KB
Raw

项目常用配置

目前，项目都讲求工程化，因此需要知道一些常用的项目配置。

一般项目配置(webpack)

通用配置

const path = require("path");

module.exports = {
resolve: {
    extensions: [".ts", ".json", ".js"]
},
output: {
    library: "StandardProject",
    libraryExport: "default",
    libraryTarget: "umd"
},
plugins: [
    new MiniCssExtractPlugin({
    filename: `../dist/css/[name].min.css`,
    chunkFilename: "[id].css"
    }),
    new OptimizeCSSAssetsPlugin({})
],
module: {
    rules: [
    {
        test: /\.js$/,
        loader: "source-map-loader",
        enforce: "pre"
    },
    {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
        {
            loader: "babel-loader",
            options: {
            presets: [
                "@babel/preset-env",
                "@babel/preset-typescript"
            ],
            plugins: [
                ["@babel/plugin-proposal-class-properties"],
                ["@babel/plugin-proposal-object-rest-spread"]
            ]
            }
        },
        {
            loader: "tslint-loader",
            options: {
            configFile: path.resolve(__dirname, "../tslint.json"),
            emitErrors: true,
            fix: false,
            tsConfigFile: path.resolve(__dirname, "../tsconfig.json")
            }
        }
        ]
    }
    ]
}
};

### dev环境配置

const path = require("path");
const merge = require("webpack-merge");
const base = require("./webpack.base.config");

let dev = {
entry: {
    "standard-project": path.resolve(__dirname, "../example/index.ts")
},
devtool: "inline-source-map",
devServer: {
    contentBase: path.resolve(__dirname, "../example"),
    port: 8080,
    overlay: true
},
output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "../example")
},
mode: "development"
};

module.exports = merge(base, dev);

正式环境

const path = require("path");
const merge = require("webpack-merge");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const base = require("./webpack.base.config");
const CleanWebpackPlugin = require("clean-webpack-plugin");

let prod = {
entry: {
    "standard-project": path.resolve(__dirname, "../src/index.ts")
},
plugins: [
    new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: ["../dist/**"],
    dangerouslyAllowCleanPatternsOutsideProject: true,
    }),
    new UglifyJsPlugin({
    test: /\.ts?$/i,
    uglifyOptions: {
        compress: {
        pure_funcs: ["console.log", "alert"] // https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
        }
    }
    })
],
output: {
    filename: `[name].min.js`,
    path: path.resolve(__dirname, "../dist")
},
mode: "production"
};

module.exports = merge(base, prod);

preGit

const path = require('path')
const fs = require('fs')

const messagePath = path.resolve(__dirname, process.env.HUSKY_GIT_PARAMS)
const commitMessage = fs.readFileSync(messagePath, 'utf8')

const conventionalRegex = /^(chore|docs|feat|fix|perf|refactor|style|test)[:]/gim
const conventionalRegexExecResult = conventionalRegex.exec(commitMessage)

const warn = (message) => {
// eslint-disable-next-line no-console
console.log('\x1b[31m', message, '\x1b[0m')
}
const exit = () => {
process.exit(-1)
}
const conventionalCommitWarn = () => {
warn(
    '你的 commit 信息不符合约定式提交规范: https://www.conventionalcommits.org'
)
warn('结合项目实际，我们采用约定式提交规范的子集，格式简要描述如下\n')
warn('<type>: <description> // 第一行')
warn('') // blank line
warn('[optional body]\n')
warn('type 有如下类型：')
warn('chore: 构建流程、依赖管理、项目规范等')
warn('docs: 只改到了文档')
warn('feat: 加入一个新特性')
warn('fix: 修复一个 bug')
warn('perf: 性能优化的修改')
warn('refactor: 项目代码重构')
warn('style: 格式修改，如空格、增加分号')
warn('test: 增加遗漏的测试用例，或更正测试用例\n')
warn('description 描述主要修改的内容\n')
warn('body: 描述为什么修改, 做了什么样的修改, 以及开发的思路等等\n')
warn('约定式提交规范 demo:\n')
warn('chore: 增加 git commit 规范约束')
warn('')
warn(
    '为了更好地追踪代码的引入原因，了解历史背景，本次修改强制 commit 信息遵守约定式提交规范。改动简介：使用第三方库 husky 监听 commit-msg hook，在提交时执行项目根目录的 preGit.js 检查提交信息\n'
)
}

// check commit message
if (
conventionalRegexExecResult === null
|| (conventionalRegexExecResult !== null
    && commitMessage.indexOf(conventionalRegexExecResult[1]) !== 0)
) {
conventionalCommitWarn()
exit()
}

基础库类常用配置(rollup)

基本配置

const alias = require("rollup-plugin-alias");
const tslint = require("rollup-plugin-tslint");
const resolve = require("rollup-plugin-node-resolve"); //help find node package
const commonjs = require("rollup-plugin-commonjs"); //transform commonjs to esm
const babel = require("rollup-plugin-babel");
const replace = require("rollup-plugin-replace");
const typescript = require("rollup-plugin-typescript");

module.exports = {
plugins: [
    alias({
    resolve: [".ts,.js"]
    }),
    replace({
    "process.env.NODE_ENV": JSON.stringify(
        process.env.NODE_ENV || "development"
    )
    }),
    resolve(),
    typescript(),
    commonjs({
    include: "node_modules/**"
    }),
    tslint({
    include: ["src/**/*.ts"]
    }),
    babel({
    runtimeHelpers: true,
    exclude: "node_modules/**" // only transpile our source code
    })
]
};

### dev环境

const baseConf = require("./rollup.base");
const serve = require("rollup-plugin-serve");
const path = require("path");

const componentName = process.env.COMPONENT;

module.exports = {
input: path.resolve(__dirname, `../src/${componentName}/index.ts`),
output: {
    file: path.resolve(__dirname, `../src/${componentName}/examples/index.js`),
    format: "umd",
    name: `${componentName}`,
    sourceMap: "inline"
},
plugins: [
    ...baseConf.plugins,
    serve({
    port: 8088,
    contentBase: [""]
    })
]
};

正式环境

const baseConf = require("./rollup.base");
const filesize = require("rollup-plugin-filesize");
const { uglify } = require("rollup-plugin-uglify");
const { minify } = require("uglify-es");
const path = require("path");
const { terser } = require("rollup-plugin-terser");
const { name, version, author } = require("../package.json");

const componentName = process.env.COMPONENT;
const banner =
`${"/*!\n" + " * "}${name}.js v${version}\n` +
` * (c) 2018-${new Date().getFullYear()} ${author}\n` +
` * Released under the MIT License.\n` +
` */`;

module.exports = [
{
    input: path.resolve(__dirname, `../src/${componentName}/index.ts`),
    ...baseConf,
    output: [
    {
        file: path.resolve(
        __dirname,
        `../src/${componentName}/dist/${componentName}.min.js`
        ),
        format: "umd",
        name,
        banner,
        sourcemap: true
    }
    ],
    plugins: [...baseConf.plugins, uglify({}, minify), filesize()]
},
{
    input: path.resolve(__dirname, `../src/${componentName}/index.ts`),
    ...baseConf,
    output: {
    file: path.resolve(
        __dirname,
        `../src/${componentName}/dist/${componentName}.min.esm.js`
    ),
    format: "esm",
    banner
    },
    plugins: [...baseConf.plugins, terser(), filesize()]
}
];