亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

從 javascript 包的子文件夾導入

從 javascript 包的子文件夾導入

慕虎7371278 2022-10-13 15:53:24
我有一個打字稿庫,由多個文件夾組成。每個文件夾都包含一個 index.ts 文件,該文件導出一些業務邏輯。我正在嘗試將此與匯總捆綁在一起以在呼叫站點上實現此行為:import { Button, ButtonProps } from 'my-lib/button'import { Input, Textarea } from 'my-lib/input'import { Row, Column } from 'my-lib/grid'這是目錄結構:我有一個主要內容index.ts,src/其中包含:export * from './button';export * from './input';export * from './grid';使用這種風格,我可以做到:import { Button, Input, InputProps, Row, Column } from 'my-lib'但我不想要這個。我想通過它們的命名空間訪問每個模塊。如果我從文件中刪除導出index.ts,我所能做的就是:import { Button } from 'my-lib/dist/button'這是我以前沒有看到的。添加dist/到導入語句意味著我正在通過相對路徑訪問模塊。我想要my-lib/Button。我正在使用匯總。我嘗試使用alias插件但沒有用。以下是我的匯總配置:const customResolver = resolve({  extensions: ['ts'],});export default {  input: `src/index.ts`,  output: [    {      file: pkg.main,      format: 'cjs',      sourcemap: true,      // plugins: [terser()],    },    {      file: pkg.module,      format: 'es',      sourcemap: true,      plugins: [terser()],    },  ],  // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')  external: [],  watch: {    include: 'src/**',  },  plugins: [    // Allow json resolution    json(),    // Compile TypeScript files    typescript({ useTsconfigDeclarationDir: true }),    // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)    commonjs(),    // Allow node_modules resolution, so you can use 'external' to control    // which external modules to include in the bundle    // https://github.com/rollup/rollup-plugin-node-resolve#usage    resolve(),    // Resolve source maps to the original source    sourceMaps(),    alias({      entries: [        { find: 'my-lib/button', replacement: './dist/button' },        { find: 'my-lib/input', replacement: './dist/input' },        { find: 'my-lib/grid', replacement: './dist/grid' },      ],      customResolver,    }),  ],};
查看完整描述

3 回答

?
慕尼黑8549860

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

  • 返回文件mainmodule

這會起作用,因為我們有

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

在后一種情況下,它將再次查看mainor module

但我們有:

node_modules
  my-package/
    package.json
    dist/
      index.js

訣竅

訣竅是,不要使用其dist文件夾發布項目根目錄,而是“坦白”dist文件夾并使用發布dist文件夾npm publish dist。

Frank(如frank a letter)表示您需要package.jsondist文件夾中創建一個;添加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策劃的在哪里。


查看完整回答
反對 回復 2022-10-13
?
滄海一幻覺

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(意思是把輸出文件寫到根目錄下)。

希望這可以幫助。


查看完整回答
反對 回復 2022-10-13
?
當年話下

TA貢獻1890條經驗 獲得超9個贊

經過多次試驗和錯誤后,我能夠通過傳入輸入列表、使用 preserveModulespreserveModulesRoot選項以及簡單的安裝后腳本來完成這項工作。

這是我的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是否存在來完成的。


查看完整回答
反對 回復 2022-10-13
  • 3 回答
  • 0 關注
  • 194 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號