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

我正在创建我的第一个 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')
}

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

我决定创建一个演示页面：我创建了 demo 文件夹，在里面我创建了 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:

<html>
  <head>
    <link rel="icon" type="image/png" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <title>Say hello</title>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="./index.ts"></script>
  </body>
</html>

demo/index.ts:

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

sayHello()

如果我运行 yarn start:demo，位于 http://localhost:1234/ 的演示页面无法使用：404. 页面未找到。为什么？

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

摘要：我想做的是创建一个库，该库能：

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

非常感谢！

我也试过：

"lib": "dist/main.js",
  "demo": "dist-demo/main.js",
  "type": "module",
  "module": "dist/module.js",
  "targets": {
    "lib": {
      "source": "src/index.ts",
      "distDir": "./dist",
      "isLibrary": true
    },
    "demo": {
      "source": "demo/index.html",
      "distDir": "./dist-demo"
    }
  },
  "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",
    "compile": "rm -rf dist/ && tsc --outDir dist",
    "compile-watch": "rm -rf dist/ && tsc -w --outDir dist",
    "prepublish": "yarn compile",
    "check": "tsc --noEmit"
  },

但是它不起作用

现在我有：

  ...
  "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",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

答案＃1

Parcel 默认会在 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 文件将不再被添加（看起来像是一个 bug）。所以 index.html 将无法找到。

为了解决这个问题，我建议你将不同的 dist 文件夹分开：dist 仅用于库，dist-demo 用于网站（生产和开发）:

    "build": "parcel build",
    "start:demo": "parcel ./demo/index.html --dist-dir dist-demo",