从零创建npm依赖，只需执行一条命令
<h2 id="由来">由来</h2><p>最近在弄新的npm依赖，但是发现没有都<strong>从头创建项目</strong>实属有点儿<strong>麻烦</strong>，然后我找了之前开发的依赖，将多余代码删除了作为初始化的项目。于是~为什么不弄个<strong>模版</strong>，每次只需要<strong>初始化模版</strong>即可，所以就有了这个模版，为了方便，我还<strong>发布到了npm</strong>上，只需要<strong>简单的执行命令</strong>即可初始化npm依赖开发的项目。</p>
<h2 id="特性">特性</h2>
<ul>
<li>🚀 <strong>快速创建</strong>: 一行命令即可创建完整的TypeScript NPM库项目</li>
<li>💪 <strong>TypeScript</strong>: 内置TypeScript支持与类型声明生成</li>
<li>📦 <strong>多格式输出</strong>: 支持CommonJS、ES Module、UMD和IIFE格式</li>
<li>🎨 <strong>CSS/SCSS支持</strong>: 可以将样式文件打包到JS中或提取为单独文件</li>
<li>🧪 <strong>测试环境</strong>: 内置Node.js和浏览器测试环境</li>
<li>🔄 <strong>灵活配置</strong>: 模块化且易于自定义的构建配置</li>
</ul>
<h2 id="快速开始">快速开始</h2>
<p>无需安装，直接运行:</p>
<pre><code class="language-bash"># 使用npx（推荐）
npx create-ts-npm my-lib
# 或使用npm init
npm init ts-npm my-lib
# 或使用yarn create
yarn create ts-npm my-lib
</code></pre>
<p>然后按照提示操作，输入包名称、描述和作者信息。</p>
<h2 id="手动安装">手动安装</h2>
<p>如果你需要多次使用，也可以选择全局安装:</p>
<pre><code class="language-bash"># 全局安装
npm install -g create-ts-npm
# 然后使用
create-ts-npm my-lib
</code></pre>
<h2 id="生成的项目内容">生成的项目内容</h2>
<p>生成的项目包含以下内容:</p>
<pre><code>.
├── src/ # 源代码目录
│ ├── index.ts # 主入口文件
│ └── styles/ # 样式文件
├── build/ # 构建配置
├── dist/ # 打包输出目录（构建后生成）
├── types/ # 类型声明文件（构建后生成）
├── test-project/ # 测试项目
├── tsconfig.json # TypeScript配置
└── rollup.config.js # Rollup配置
</code></pre>
<h2 id="生成的项目构建配置说明">生成的项目构建配置说明</h2>
<p>本模板采用模块化的构建配置，主要配置文件已被拆分到<code>build/</code>目录下，使配置更清晰、易于维护。</p>
<h3 id="配置文件结构">配置文件结构</h3>
<ul>
<li><code>rollup.config.js</code>: 主配置文件入口点，通常不需要修改</li>
<li><code>build/config.js</code>: 集中管理所有可配置选项的地方，<strong>修改此文件来自定义配置</strong></li>
<li><code>build/create-config.js</code>: 创建Rollup配置对象的函数</li>
<li><code>build/plugins/</code>: 包含各种插件配置的目录</li>
</ul>
<h3 id="主要配置项">主要配置项</h3>
<p>要自定义构建配置，只需编辑<code>build/config.js</code>文件中的选项：</p>
<pre><code class="language-javascript">// 要生成的输出格式，可以根据需要添加或删除
// 可选值: 'cjs', 'es', 'umd', 'iife'
exports.OUTPUT_FORMATS = ['cjs', 'es'];
// 是否生成类型声明文件
exports.GENERATE_TYPES = true;
// UMD/IIFE格式下的全局变量名
exports.GLOBAL_NAME = pkg.name.replace(/-()/g, (_, letter) => letter.toUpperCase());
// 外部依赖，这些依赖不会被打包
exports.EXTERNAL = [];
// 入口文件路径
exports.INPUT_FILE = './src/index.ts';
// CSS/SCSS配置
exports.CSS_CONFIG = {
// 是否启用CSS/SCSS处理
enabled: true,
// 是否将CSS提取为单独的文件，false表示注入到JS中
extract: false,
// 是否压缩CSS
minimize: true,
// CSS模块化，设为true会将类名转换为哈希值，避免样式冲突
modules: false,
// 是否使用Sass预处理器
sass: true,
// 自动添加浏览器前缀
autoPrefix: true,
// 提取的CSS文件名
fileName: 'styles.css'
};
</code></pre>
<h3 id="输出格式及其适用场景">输出格式及其适用场景</h3>
<table>
<thead>
<tr>
<th>格式</th>
<th>文件扩展名</th>
<th>适用场景</th>
<th>全局变量</th>
</tr>
</thead>
<tbody>
<tr>
<td>CJS (CommonJS)</td>
<td><code>.js</code></td>
<td>Node.js环境、webpack等打包工具</td>
<td>不适用</td>
</tr>
<tr>
<td>ESM (ES Module)</td>
<td><code>.mjs</code></td>
<td>现代浏览器、支持ES模块的打包工具、支持tree-shaking</td>
<td>不适用</td>
</tr>
<tr>
<td>UMD (Universal)</td>
<td><code>.umd.js</code></td>
<td>通用格式，同时支持Node.js、AMD和浏览器</td>
<td>需要定义</td>
</tr>
<tr>
<td>IIFE (自执行函数)</td>
<td><code>.min.js</code></td>
<td>直接在浏览器中通过script标签使用</td>
<td>需要定义</td>
</tr>
</tbody>
</table>
<h3 id="常见配置示例">常见配置示例</h3>
<ol>
<li>
<p><strong>添加UMD和IIFE格式</strong>:</p>
<pre><code class="language-javascript">// build/config.js
exports.OUTPUT_FORMATS = ['cjs', 'es', 'umd', 'iife'];
</code></pre>
</li>
<li>
<p><strong>配置外部依赖</strong>:</p>
<pre><code class="language-javascript">// build/config.js
exports.EXTERNAL = ['lodash', 'react', 'react-dom'];
</code></pre>
</li>
<li>
<p><strong>提取CSS为单独文件</strong>:</p>
<pre><code class="language-javascript">// build/config.js
exports.CSS_CONFIG.extract = true;
exports.CSS_CONFIG.fileName = 'your-style.css';
</code></pre>
</li>
<li>
<p><strong>启用CSS模块化</strong>:</p>
<pre><code class="language-javascript">// build/config.js
exports.CSS_CONFIG.modules = true;
</code></pre>
</li>
<li>
<p><strong>禁用TypeScript类型声明生成</strong>:</p>
<pre><code class="language-javascript">// build/config.js
exports.GENERATE_TYPES = false;
</code></pre>
</li>
</ol>
<h3 id="在项目中使用cssscss">在项目中使用CSS/SCSS</h3>
<p>要在项目中使用CSS或SCSS文件，只需要在TypeScript文件中导入它们：</p>
<pre><code class="language-typescript">// 导入CSS文件
import './styles/style.css';
// 导入SCSS文件
import './styles/style.scss';
</code></pre>
<p>如果启用了CSS模块化（<code>CSS_CONFIG.modules = true</code>），可以这样导入和使用：</p>
<pre><code class="language-typescript">// 导入CSS模块
import styles from './styles/style.css';
// 使用CSS类
element.className = styles.exampleClass;
</code></pre>
<h2 id="使用生成的项目">使用生成的项目</h2>
<p>生成项目后，你可以:</p>
<pre><code class="language-bash"># 安装依赖
cd my-lib
npm install
# 开发模式（构建并在Node.js中测试）
npm run dev
# 在浏览器中测试
npm run test:browser
# 构建生产版本
npm run build:pro
# 发布到NPM
npm run toPublish
</code></pre>
<h2 id="更多">更多</h2>
<p>更多说明见gitee：https://gitee.com/jl15988/npm-dependent-template</p><br><br>
来源：https://www.cnblogs.com/jl15988/p/18802549
頁:
[1]