使用 Parcel 2 创建带有演示页面的 Typescript 库

Question

我正在创建我的第一个 Typescript 库，它导出一些函数。

该项目的结构是这样的：

myProject
  |_ assets/
    |_ logo.png
  |_ coverage
    |_ ...some stuff
  |_ demo
    |_ index.html
    |_ index.ts
    |_ style.css
  |_ dist
    |_ ...
  |_ dist-demo
    |_ ...
  |_ node_modules
  |_ src
    |_ lib/
      |_ types.ts
      |_ index.ts
    |_ index.ts
  |_ .gitignore
  |_ package.json

index.ts是：

export { sayHello } from './lib'

lib/index.ts是：

export function sayHello() {
  console.log('Hello')
}

（显然，这只是一个简单的例子，重要的是结构）。

我决定创建一个演示页面：我创建了演示文件夹，并在其中创建了index.html, index.ts, style.css。

然后我决定使用 Parcel 作为捆绑器。请记住，我是一名初级开发人员。

所以我的package.json是：

{
  "name": "myLib",
  "version": "1.0.0",
  "repository": "https://github.com/.../myLib.git",
  "author": "...",
  "license": "MIT",
  "private": true,
  "source": "src/index.ts",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build",
    "build:demo": "parcel build demo/index.html --dist-dir dist-demo",
    "start:demo": "parcel demo/index.html",
    "compile": "rm -rf dist/ && tsc --outDir dist",
    "compile-watch": "rm -rf dist/ && tsc -w --outDir dist",
    "prepublish": "yarn compile",
  },
  "dependencies": {},
  "devDependencies": {
    "@parcel/packager-ts": "^2.1.0",
    "@parcel/transformer-typescript-types": "^2.1.0",
    "parcel": "latest",
    "typescript": ">=3.0.0"
  }
}

如果我运行yarn build，则会在文件夹中创建构建dist。然后，我将使用捆绑的文件并在演示页面中对其进行测试，因此我的演示文件是：

demo/index.html:

myProject
  |_ assets/
    |_ logo.png
  |_ coverage
    |_ ...some stuff
  |_ demo
    |_ index.html
    |_ index.ts
    |_ style.css
  |_ dist
    |_ ...
  |_ dist-demo
    |_ ...
  |_ node_modules
  |_ src
    |_ lib/
      |_ types.ts
      |_ index.ts
    |_ index.ts
  |_ .gitignore
  |_ package.json

demo/index.ts:

import { sayHello } from '../dist/module' // <-- ???

sayHello()

如果我运行yarn start:demo，则演示页面http://localhost:1234/将不起作用：404. Page not found。为什么？

然后，如何使用演示页面的内容创建一个公共站点。我想使用 Netflify 来部署它。我的 package.json 配置有什么问题？

摘要：我想要创建一个库：

• 导出一些函数
• 例如，包含一些视觉示例的网站（演示页面）。

多谢！

---

我也尝试过：

export { sayHello } from './lib'

但它不起作用

---

我现在有：

  ...
  "source": "src/index.ts",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "watch": "parcel watch ./src/index.ts",
    "build": "parcel build ./src/index.ts --dist-dir dist",
    "build:demo": "parcel build ./demo/index.html --dist-dir dist-demo",
    "start:demo": "parcel ./demo/index.html --dist-dir dist-demo",
    "compile": "rm -rf dist/ && tsc --outDir dist",
    "compile-watch": "rm -rf dist/ && tsc -w --outDir dist",
    "prepublish": "yarn compile"
  },
  ...

yarn build并yarn start:demo工作，但是当我跑步时yarn build:demo，我得到：

yarn run v1.22.17
$ parcel build ./demo/index.html --dist-dir dist-demo
 Build failed.

@parcel/core: No transformers found for demo/index.html with pipeline: 'types'.

  /Users/.../node_modules/@parcel/config-default/index.json:3:3
     2 |   "bundler": "@parcel/bundler-default",
  >  3 |   "transformers": {
  >    |   ^^^^^^^^^^^^^^^^^
  >  4 |     "types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"],
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  5 |     "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  6 |     "data-url:*": ["...", "@parcel/transformer-inline-string"],
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  7 |     "worklet:*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  8 |       "@parcel/transformer-worklet",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  9 |       "..."
  >    | ^^^^^^^^^^^
  > 10 |     ],
  >    | ^^^^^^
  > 11 |     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 12 |       "@parcel/transformer-babel",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 13 |       "@parcel/transformer-js",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Answer 1

默认情况下，包裹会在dist文件夹中构建他需要的所有内容，直到您使用该标志指定另一个--dist-dir。所以你的问题是该build命令将生成一个dist如下文件夹：

dist/main.js
dist/module.js
dist/index.d.ts

但是当您运行时start:demo，parcel 还会编译以下文件dist：

dist/index.125bf0c5.js
dist/index.html
dist/main.js
dist/module.js
dist/index.d.ts

奇怪的部分来了，如果您删除该dist文件夹并重新运行构建步骤，则start:demo不再添加文件（看起来像一个错误）。所以index.html不会被发现。

要解决此问题，我建议您将不同的文件夹分开dist：dist仅用于库和dist-demo网站（产品和开发）：

dist/main.js
dist/module.js
dist/index.d.ts