ls-template-cli

ls-template-cli

一、背景 📖

• 零配置，开箱即用的模版脚手架工具

二、特性 🧰

• 📦 零配置,开箱即用, 预设包含vite及rollup、webpack相关模版;
• 🚀 使用 axios + npm 的方式构建你的项目基础模板，初始化速度要比 create-react-app 快;
• 💯 代码风格统一，项目统一配置 Eslint、Prettier、Husky;
• 🥂 使用 Rollup 打包你的 Typescript 库，支持 UMD、CJS、ESM 输出格式，并生成全局 .d.ts 文件;
• 🍻 支持用户自定义 Rollup 配置扩展原有的配置，为项目添加特有的功能;
• 🥂 使用 Webpack 打包你的 Web 应用程序,实现多环境打包部署，代码分割优化，配合官方分析工具，实时优化代码;
• 🍻 支持用户自定义 Webpack 配置扩展原有的配置，为项目添加特有的功能;
• 🎯 支用户自定义 Babel 配置，让你的程序更健壮;
• 📕 友好的日志输出，让你快速定位问题所在以及增加开发体验;

三、快速开始 🚩

npx ls-template-cli my-app
cd my-app
npm start

如果你之前已经通过 npm install -g ls-template-cli 全局安装了 ls-template-cli，建议你使用 npm uninstall -g ls-template-cli 或 yarn global remove ls-template-cli 来卸载这个包，以确保 npx 总是使用最新的版本。

当你在终端中输入 npx ls-template-cli my-app 时，控制台会有以下选项功能选择:

如果项目创建成功，会有如下效果图所示:

四、 创建应用程序 📕

要创建一个新的应用程序使用以下方法

NPX

npx ls-template-cli my-app

它将在当前文件夹中创建一个名为 my-app 的目录。 在该目录中，它将根据你所选择的项目类型生成不同的初始项目结构并根据你所选择的包管理工具进行安装可传递的依赖项，例如当你选择 react-ui 时会为你创建一个开箱即用的组件库模板,具体目录结构如下所示:

├───📁 .husky/
│   ├───📄 commit-msg
│   └───📄 pre-commit
├───📁 .storybook/
│   ├───📄 main.js
│   └───📄 preview.js
├───📁 .vscode/
│   └───📄 settings.json
├───📁 example/
│   ├───📄 App.tsx
│   ├───📄 index.html
│   ├───📄 index.tsx
│   ├───📄 package.json
│   └───📄 tsconfig.json
├───📁 src/
│   ├───📁 components/
│   │   └───...
│   └───📄 index.tsx
├───📁 stories/
│   └───📄 button.stories.tsx
├───📄 .eslintignore
├───📄 .eslintrc.json
├───📄 .gitignore
├───📄 .prettierignore
├───📄 .prettierrc.json
├───📄 babel.config.js
├───📄 commitlint.config.js
├───📄 package.json
├───📄 pnpm-lock.yaml
└───📄 tsconfig.json

无需配置或复杂的文件夹结构，只有构建应用程序所需的文件。

安装完成后，你可以打开你的项目文件夹:

cd my-app

在新创建的项目中，您可以运行一些内置命令:

npm start、pnpm start 或者 yarn start

如果你使用的是 web 相对应的项目类型，则在开发模式下运行应用程序并自动打开 http://localhost:3000 在浏览器中进行查看，否则则使用 Rollup 中的 watch 钩子在命令行终端中监听您文件的变化。

npm build、pnpm build 或者 yarn build

如果您使用的是 web 应用程序，使用该命令则会将其应用程序优化构建以获得最佳性能并将其存放与 dist 目录下。

如果您在项目初始化的时候选择的 common-lib 或者 react-ui,那么该应用程序将会使用 Rollup 进行打包构建，并根据你所传入的参数构建成不同格式的文件,完整参数配置如下所示:

Usage
  $ rollup-script build [options]

Options
  --target              指定目标环境  默认使用 web
  --name                指定在 UMD 模式构建中全局的名称
  --format              指定模式格式(cjs，esm，umd)  默认是 esm

Examples
  $ rollup-script build --target node
  $ rollup-script build --name Foo
  $ rollup-script build --format cjs,esm,umd
  $ rollup-script build --format umd --name Foo

Babel

您可以将自己的 Babel 配置添加到项目的根目录当中, ls-template-cli 会将其与自己原有的 Babel 转换合并并且将新的预设和插件放在列表的末尾。

Example

// babel.config.js

module.exports = {
  plugins: ["babel-plugin-styled-components"],
};

webpack

⚠️ Warning 这些修改有可能覆盖 ls-template-cli 的默认行为和配置，请谨慎使用!

如果您想扩展 webpack 配置已增加项目对不同功能的支持或者增加项目性能，您可以在 webpack.config.js 文件下对 webpack 配置进行扩展.并且您可以使用 process.env.NODE_ENV 以区分开发环境和生产环境。

Example

// webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isDevelopment = process.env.NODE_ENV === "development";

module.exports = {
  plugins: [isDevelopment && MiniCssExtractPlugin()],
};

Rollup

⚠️ Warning 这些修改有可能覆盖 ls-template-cli 的默认行为和配置，请谨慎使用!

如果你选择的项目类型是 common-lib 或者 react-ui 并且您希望更改 Rollup 配置，可以在项目的根目录下创建一个名为 rollup.config.js 的文件，示例代码如下所示:

module.exports = {
  rollup(config, options) {
    return config;
  },
};

Example

const postcss = require("rollup-plugin-postcss");

module.exports = {
  rollup(config, options) {
    config.plugins.push(postcss());
    return config;
  },
};