3 回答

TA貢獻1818條經驗 獲得超11個贊
這是可能的,但需要一些額外的步驟。上面提到過,這是 Material-UI 采取的方法。
訣竅是發布一個精選dist
文件夾,而不是你的 repo 的根文件夾。
建造
首先,讓我們明確一點,您的庫是使用 CommonJS 還是 ESM 構建的并不重要。這是關于模塊分辨率的。
假設項目名為my-package
.
現在大多數項目,在我們建成src/
后dist/
都會有
my-package package.json src/ index.js dist/ index.js
并在 package.json
"main": "dist/index.js"
或對于 esm
"module": "dist/index.js"
出版
大多數項目只是添加.npmignore
和發布項目的根目錄,因此在安裝項目時,最終結果node_modules
如下:
node_modules my-package/ package.json dist/ index.js
正在解決
安裝后,考慮這個導入:
import myProject from "my-project";
模塊解析器將執行此操作(大大簡化,因為完整的算法在這里無關緊要):
去
node_modules
尋找
my-project
加載
package.json
返回文件
main
或module
這會起作用,因為我們有
node_modules my-package/ package.json dist/ index.js
解析子路徑
import something from "my-project/something";
分辨率算法將與
node_modules my-project/ somthing.js
也與
node_modules my-project/ something/ index.js
與
node_modules my-project/ something/ package.json
在后一種情況下,它將再次查看main
or module
。
但我們有:
node_modules my-package/ package.json dist/ index.js
訣竅
訣竅是,不要使用其dist
文件夾發布項目根目錄,而是“坦白”dist
文件夾并使用發布dist
文件夾npm publish dist
。
Frank(如frank a letter)表示您需要package.json
在dist
文件夾中創建一個;添加README.md
LICENSE
等
可以在此處找到如何完成此操作的一個相當簡短的示例。
因此,鑒于我們在構建之后:
node_modules my-package/ package.json dist/ index.js something.js
一旦發布,我們得到
node_modules my-project/ package.json index.js something.js
package.json
策劃的在哪里。

TA貢獻1824條經驗 獲得超5個贊
首先,兩者之間的唯一區別
import { Button } from 'my-lib/dist/button'
和
import { Button } from 'my-lib/button'
只是一個目錄級別。
曾經說過,"outDir": "dist",
在您的tsconfig.json
文件中有您需要添加dist/
到您的import
報表之前。
確實,你舉的兩個庫都是根目錄下的文件分發的:lodash直接在根目錄下有js
文件,而material-ui在其文件中沒有outDir
選項tsconfig.json
(意思是把輸出文件寫到根目錄下)。
希望這可以幫助。

TA貢獻1890條經驗 獲得超9個贊
經過多次試驗和錯誤后,我能夠通過傳入輸入列表、使用 preserveModules和preserveModulesRoot選項以及簡單的安裝后腳本來完成這項工作。
這是我的rollup.config.js
const options = {
input: [
'src/index.ts',
'src/api/index.ts',
'src/components/index.ts',
'src/contexts/index.ts',
'src/hooks/index.ts',
'src/lib/index.ts',
'src/types/index.ts',
'src/utils/index.ts',
'src/UI/index.ts',
],
output: [
{
format: 'cjs',
dir: 'dist',
exports: 'auto',
preserveModules: true,
preserveModulesRoot: 'src',
sourcemap: true,
},
],
plugins: [
// Preferably set as first plugin.
peerDepsExternal(),
typescript({
tsconfig: './tsconfig.rollup.json',
}),
postcss({
extract: false,
modules: true,
use: ['sass'],
}),
],
};
export default options;
腳本/postinstall.sh
#!/usr/bin/env bash
set -e;
# skip postinstall if npm install for development
# rollup.config.js is not included in dist
if [ -f "rollup.config.js" ]; then
echo "skipping your package's postinstall routine.";
exit 0;
fi
echo 'Copying files from dist folder into root project folder...'
cp -r dist/* ./ && rm -rf dist
echo 'Postinstall done!'
包.json
"scripts": {
"postinstall": "./scripts/postinstall.sh",
},
這將編譯所有文件并將其輸出到dist文件夾。postinstall 腳本會將所有文件從dist復制到根項目文件夾中。
注意*:在本地運行 npm install 時應跳過安裝后腳本。這是通過檢查rollup.config.js是否存在來完成的。
添加回答
舉報