vite-plugin-esmodule - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

index.d.ts

@@ -8,3 +8,4 @@ import type { Plugin, UserConfig } from 'vite';
 export interface WebpackOptions {
-  webpack?: true | ((config: Configuration) => Configuration | void | Promise<Configuration | void>);
+  webpack?: true
+    | ((config: Configuration) => Configuration | void | Promise<Configuration | void>);
   vite?: never;
@@ -14,3 +15,4 @@ }
 export interface ViteOptions {
-  vite?: true | ((config: UserConfig) => UserConfig | void | Promise<UserConfig | void>);
+  vite?: true
+    | ((config: UserConfig) => UserConfig | void | Promise<UserConfig | void>);
   webpack?: never;
@@ -17,0 +19,0 @@ }

package.json

 {
   "name": "vite-plugin-esmodule",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Build ES module to CommonJs module for Node.js",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -14,3 +14,3 @@ # vite-plugin-esmodule
 
-🤔 When ES module such as [execa](https://www.npmjs.com/package/execa), [node-fetch](https://www.npmjs.com/package/node-fetch), [file-type](https://www.npmjs.com/package/file-type) used in the Node.js project, we should compile them into CommonJs modules to ensure that they can work
+🤔 When ES module such as [execa](https://www.npmjs.com/package/execa), [node-fetch](https://www.npmjs.com/package/node-fetch), [file-type](https://www.npmjs.com/package/file-type) used in the Node.js project, we should compile them into CommonJs modules to ensure that they can work normally
 
@@ -34,11 +34,14 @@ 👉 You can think that this plugin is to solve some NPM Packges released by [sindresorhus](https://www.npmjs.com/~sindresorhus) 😅
       'execa',
-      'file-type',
-      // or
-      // file-type have exports condition in package.json
-      // { 'file-type': 'file-type/index.js' },
-    ], {
-      webpack: true, // -> default use webpack
-      // or
-      // vite: true, // -> there may be some problems
-    }),
+
+      // `file-type` have exports condition in package.json
+      // this means that you have explicit specified the entry file
+      // the purpose of this design is to smooth out the difference between Vite and Webpack
+
+      // when setting `target: 'node'` in Webpack, it always takes `exports.node` as the entry
+      // in other words, using 'filt-type' string can also work normally
+      // but Vite always gives priority to `exports.browser` as the entry
+      { 'file-type': 'file-type/index.js' },
+      // it can work normally when using Webpack
+      // 'filt-type',
+    ]),
   ],
@@ -48,2 +51,12 @@ }
 
+By default, the plugin use Webpack as build tools. You can specify Vite by `options.vite`  
+
+```js
+esmodule([...some-es-module], {
+  vite: true,
+  // or
+  vite: (config) => config,
+})
+```
+
 - execa.js
@@ -77,3 +90,4 @@
 export interface WebpackOptions {
-  webpack?: true | ((config: Configuration) => Configuration | void | Promise<Configuration | void>);
+  webpack?: true
+    | ((config: Configuration) => Configuration | void | Promise<Configuration | void>);
   vite?: never;
@@ -83,3 +97,4 @@ }
 export interface ViteOptions {
-  vite?: true | ((config: UserConfig) => UserConfig | void | Promise<UserConfig | void>);
+  vite?: true
+    | ((config: UserConfig) => UserConfig | void | Promise<UserConfig | void>);
   webpack?: never;
@@ -86,0 +101,0 @@ }

README.zh-CN.md

@@ -12,3 +12,92 @@ # vite-plugin-esmodule
 
-[![NPM version](https://img.shields.io/npm/v/vite-plugin-esmodule.svg?style=flat)](https://npmjs.org/package/vite-plugin-esmodule)
-[![NPM Downloads](https://img.shields.io/npm/dm/vite-plugin-esmodule.svg?style=flat)](https://npmjs.org/package/vite-plugin-esmodule)
+## 此为何物
+
+🤔 在 Node.js 项目中使用一些纯 ES module 比如 [execa](https://www.npmjs.com/package/execa), [node-fetch](https://www.npmjs.com/package/node-fetch), [file-type](https://www.npmjs.com/package/file-type), 需要将它们编译成 CommonJs 格式才能正常工作
+
+👉 你姑且可以认为这个插件是为了解决这哥们儿 [sindresorhus](https://www.npmjs.com/~sindresorhus) 发布的 NPM Packges 😅
+
+🚧 该插件只在 `vite build` 阶段起作用
+
+## 来玩玩吧
+
+随手举几个 ES module 的 🌰 -> execa, node-fetch and file-type
+
+- vite.config.js
+
+```js
+import esmodule from 'vite-plugin-esmodule'
+
+export default {
+  plugins: [
+    esmodule([
+      'execa',
+
+      // 在 file-type 的 package.json 中有 exports 条件导出
+      // 这里表示你可以显示的指定你要以哪个文件作为入口
+      // 这样设计的目的是为了抹平 Vite 和 Webpack 之间的差异
+
+      // 当使用 Webpack 并设置了 target: 'node' 的时候，Webpack 会自动以 exports.node 为入口
+      // 也就是说这里使用 'filt-type' 字符串也是可行的
+      // 但是 Vite 总是优先使用 exports.browser 字段作为入口
+      { 'file-type': 'file-type/index.js' },
+      // 在 Webpack 下这样写也可行
+      // 'filt-type',
+    ]),
+  ],
+}
+```
+
+默认情况下, 该插件使用 Webpack 作为构建工具. 你也可以通过 `options.vite` 指定使用 Vite  
+
+```js
+esmodule([...some-es-module], {
+  vite: true,
+  // or
+  vite: (config) => config,
+})
+```
+
+
+- execa.js
+
+```js
+import {execa} from 'execa';
+
+const {stdout} = await execa('echo', ['unicorns']);
+console.log(stdout);
+//=> 'unicorns'
+```
+
+你也可以看看其他 [案例](https://github.com/caoxiemeihao/vite-plugins/tree/main/playground/vite-plugin-esmodule)
+
+## API
+
+#### esmodule(modules[,options])
+
+modules: ES module 列表
+
+```ts
+modules: (string | { [module: string]: string })[]
+```
+
+options:
+
+```ts
+options?: WebpackOptions | ViteOptions
+
+export interface WebpackOptions {
+  webpack?: true
+    | ((config: Configuration) => Configuration | void | Promise<Configuration | void>);
+  vite?: never;
+}
+
+export interface ViteOptions {
+  vite?: true
+    | ((config: UserConfig) => UserConfig | void | Promise<UserConfig | void>);
+  webpack?: never;
+}
+```
+
+## 咋实现的
+
+只是 [vite-plugin-optimizer](https://github.com/caoxiemeihao/vite-plugins/tree/main/packages/optimizer) 的二次封装而已

No alert changes

Improved metrics

Total package byte prevSize

11369

increased by31.33%

Lines of code

158

increased by1.28%

Number of lines in readme file

102

increased by17.24%

No dependency changes