NPMパッケージ(輪)の急速な発展

モチベーション

多くの人が自分自身の車輪を書きたいが、あなたは常に次のような問題が発生したときに仕事を始め

  • どのように基本的なJSライブラリを準備する必要があります
  • ファイルがあるべき基本的なフロントエンドプロジェクト
  • しかし、また、どのようにパッケージ化され、NPMにリリース
  • どのように他の人がES6の構文を認識させることができます
  • readmeファイルを書く必要がありますどのように
  • eslintを追加する方法
  • ファイル形式のUMDをパッケージ化する方法のhtmlへの直接参照を作ります

この目的を達成するために、私は、特に迅速JavaScriptのライブラリプロジェクトをビルドするためのテンプレートを作って、基本的な設定を行います。

次のように内容は以下のとおりです。

.
├── _config.yml
├── build # 打包后的项目文件目录
|   ├── your-js-lib.min.js # 压缩后的js项目库文件
|   └── your-js-lib.min.js.map # map文件
├── node_modules # node_modules
|   └── ... # 依赖组件 ├── src # src目录 | ├── core # 源码组件目录 | └── index.js # 入口文件 ├── .babelrc # babel配置文件 ├── .gitignore # git忽略提交 ├── .npmignore # npm发表忽略提交 ├── eslintrc.json # eslin配置及规则说明 ├── LICENSE # LICENSE ├── package.json # 包依赖管理文件 ├── README.md # 项目使用说明文档 └── rollup.config.js # rollup打包工具配置文档 复制代码

開発

開発作業は、我々が通常あるときsrc彼らのニーズに応じて、プロジェクトファイルやディレクトリを作成するディレクトリ、外国の輸出の2段階の方法を以下に示します。

ステップ1

// `src/core/`
export default a or export {a, b}

ステップ2

// `src/index.js
import YourJsLib from "./core/YourJsLib";
export default YourJsLib;

ES6糸くず

npm run lint

npm run build

使用

直接参照ページで

<script src="js/your-js-lib.min.js"></script>

またはNPMを使用してインストール

npm install your-js-lib --save
...

import YourJsLib from 'your-js-lib';

PS

  • 独自の開発プロセスの開発ツールに応じてプラグインをインストールする必要がEslint
  • プロジェクト名の下に作成するには、NPMパッケージの必要性を公開

アイテムの参照アドレス:(問題を提供し、スターへようこそ、常にこの倉庫を向上させます。)

YourJsLib

おすすめ

転載: www.cnblogs.com/ahthw/p/12177877.html