@modern-js/module-tools-docs 2.31.2 → 2.32.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @modern-js/module-tools-docs
 
+## 2.32.0
+
+### Minor Changes
+
+- 8d22b87: docs: add content about transformLodash and fix a error about english content
+  docs: 添加关于 transformLodash 的内容,并且修复一个英文内容的错误
+
+### Patch Changes
+
+- @modern-js/doc-plugin-auto-sidebar@2.32.0
+- @modern-js/doc-tools@2.32.0
+
 ## 2.31.2
 
 ### Patch Changes

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Modern.js
+Copyright (c) 2021-present Modern.js
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/docs/en/api/config/build-config.mdx

@@ -1036,6 +1036,8 @@ After enabling `inject`, you need to pay attention to the following points:
 
 You can resolve this by configuring [sideEffects](#sideeffects).
 
+:::
+
 ## style.autoModules
 
 Enable CSS Modules automatically based on the filename.
@@ -1095,13 +1097,8 @@ tailwindcss related configuration
 ```js title="modern.config.ts"
 const tailwind = {
   content: [
-    './config/html/**/*.html',
-    './config/html/**/*.ejs',
-    './config/html/**/*.hbs',
-    './src/**/*.js',
-    './src/**/*.jsx',
-    './src/**/*.ts',
-    './src/**/*.tsx',
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
 };
@@ -1179,6 +1176,51 @@ export default defineConfig({
 
 Reference the [Import Plugin - Notes](plugins/official-list/plugin-import.html#Notes)
 
+## transformLodash
+
+Specifies whether to modularize the import of [lodash](https://www.npmjs.com/package/lodash) and remove unused lodash modules to reduce the code size of lodash.
+
+This optimization is implemented using [babel-plugin-lodash](https://www.npmjs.com/package/babel-plugin-lodash) and [swc-plugin-lodash](https://github.com/web-infra-dev/swc-plugins/tree/main/crates/plugin_lodash) under the hood.
+
+- **Type**: `boolean`
+- **Default**: `true`
+
+### Example
+
+This option is enabled by default, and Module Tools will automatically redirects the code references of `lodash` to sub-paths.
+
+For example:
+
+```ts title="input.js"
+import _ from 'lodash';
+import { add } from 'lodash/fp';
+
+const addOne = add(1);
+_.map([1, 2, 3], addOne);
+```
+
+The transformed code will be:
+
+```ts title="output.js"
+import _add from 'lodash/fp/add';
+import _map from 'lodash/map';
+
+const addOne = _add(1);
+_map([1, 2, 3], addOne);
+```
+
+### Disabling the Transformation
+
+In some cases, the import transformation of `lodash` may generate unexpected code. In such cases, you can manually disable this optimization:
+
+```js title="modern.config.ts"
+export default defineConfig({
+  buildConfig: {
+    transformLodash: false,
+  },
+});
+```
+
 ## umdGlobals
 
 Specify global variables for external import of umd artifacts
@@ -1221,7 +1263,6 @@ At this point the umd artifact will go to mount on `global.myLib`
 
 - The module name of the umd artifact must not conflict with the global variable name.
 - Module names will be converted to camelCase, e.g. `my-lib` will be converted to `myLib`, refer to [toIdentifier](https://github.com/babel/babel/blob/main/packages/babel-types/src/converters/toIdentifier.ts).
-
 :::
 
 Also the function form can take one parameter, which is the output path of the current package file

package/docs/zh/api/config/build-config.mdx

@@ -1097,13 +1097,8 @@ Tailwind CSS 相关配置。
 ```js title="modern.config.ts"
 const tailwind = {
   content: [
-    './config/html/**/*.html',
-    './config/html/**/*.ejs',
-    './config/html/**/*.hbs',
-    './src/**/*.js',
-    './src/**/*.jsx',
-    './src/**/*.ts',
-    './src/**/*.tsx',
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
 };
@@ -1181,6 +1176,49 @@ export default defineConfig({
 
 参考[「Import 插件——注意事项」](plugins/official-list/plugin-import.html#注意事项)
 
+## transformLodash
+
+是否模块化 [lodash](https://www.npmjs.com/package/lodash) 的导入，删除未使用的 lodash 模块，从而减少 lodash 代码体积。这项优化基于 [babel-plugin-lodash](https://www.npmjs.com/package/babel-plugin-lodash) 和 [swc-plugin-lodash](https://github.com/web-infra-dev/swc-plugins/tree/main/crates/plugin_lodash) 实现。
+
+- 类型：`boolean`
+- 默认值：`true`
+
+### 示例
+
+该选项默认开启，Module Tools 会自动将 lodash 的代码引用指向子路径。
+
+比如：
+
+``` ts title="input.js"
+import _ from 'lodash';
+import { add } from 'lodash/fp';
+
+const addOne = add(1);
+_.map([1, 2, 3], addOne);
+```
+
+转换后的代码：
+
+```ts title="output.js"
+import _add from 'lodash/fp/add';
+import _map from 'lodash/map';
+
+const addOne = _add(1);
+_map([1, 2, 3], addOne);
+```
+
+### 关闭转换
+
+在个别情况下，lodash 的 import 转换可能会生成不符合预期的代码，此时你可以手动关闭这项优化：
+
+```js title="modern.config.ts"
+export default defineConfig({
+  buildConfig: {
+    transformLodash: false,
+  },
+});
+```
+
 ## umdGlobals
 
 指定 UMD 产物外部导入的全局变量。

package/package.json

@@ -9,13 +9,13 @@
     "directory": "packages/document/module-doc"
   },
   "license": "MIT",
-  "version": "2.31.2",
+  "version": "2.32.0",
   "main": "index.js",
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@modern-js/doc-tools": "2.31.2",
-    "@modern-js/doc-plugin-auto-sidebar": "2.31.2"
+    "@modern-js/doc-plugin-auto-sidebar": "2.32.0",
+    "@modern-js/doc-tools": "2.32.0"
   },
   "scripts": {
     "dev": "modern dev",