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

Question

I'm creating my first Typescript library that exports some functions.我正在创建我的第一个 Typescript 库来导出一些函数。

The structure of the project is this:项目的结构是这样的：

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 is: index.ts是：

export { sayHello } from './lib'

lib/index.ts is: lib/index.ts是：

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

(Obviously, this is only an easy example, the important thing is the structure). （显然，这只是一个简单的例子，重要的是结构）。

I decided to create a demo page: I created the demo folder and inside it, I created index.html , index.ts , style.css .我决定创建一个演示页面：我创建了演示文件夹，并在其中创建了index.html 、 index.ts 、 style.css 。

Then I decided to use Parcel as bundler.然后我决定使用 Parcel 作为捆绑器。 Keep in mind that I'm a junior developer.请记住，我是一名初级开发人员。

So my package.json is:所以我的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"
  }
}

If I run yarn build , the build is created in dist folder.如果我运行yarn build ，则会在dist文件夹中创建构建。 Then, I would use the bundled file and test it in the demo page, so my demo files are:然后，我会使用捆绑的文件并在演示页面中对其进行测试，所以我的演示文件是：

demo/index.html : 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 : demo/index.ts ：

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

sayHello()

If I run yarn start:demo , the demo page on http://localhost:1234/ doesn't work: 404. Page not found .如果我运行yarn start:demo ， http://localhost:1234/上的演示页面不起作用： 404. Page not found 。 Why?为什么？

And then, how can I create a public site with the content of the demo page.然后，如何使用演示页面的内容创建一个公共站点。 I think to deploy it using Netflify.我认为使用 Netflify 部署它。 What's wrong with my package.json configuration?我的 package.json 配置有什么问题？

Summary: what I would like is to create a library that:摘要：我想要创建一个库：

exports some functions导出一些函数
a website (the demo page) containing, for example, some visual examples.包含例如一些视觉示例的网站（演示页面）。

Thanks a lot!非常感谢！

I tried also:我也试过：

"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"
  },

but it doesn't work但它不起作用

Answer 1

Parcel build by default everything he needs in the dist folder until you specify another one using the --dist-dir flag. Parcel 默认在dist文件夹中构建他需要的所有内容，直到您使用--dist-dir标志指定另一个。 So your problem here is that the build command will produce a dist folder like:所以你的问题是build命令将生成一个dist文件夹，如：

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

But when you run start:demo , parcel also compile the files in dist :但是当你运行start:demo时，parcel 也会编译dist中的文件：

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

Here come the weird part, if you delete the dist folder and re-run the build steps, the start:demo files are no more added (looks like a bug).奇怪的部分来了，如果您删除dist文件夹并重新运行构建步骤，则不再添加start:demo文件（看起来像一个错误）。 So the index.html will be not be found.所以index.html 。

To fix this problem, I suggest you to separate the different dist folders: dist for the library only and dist-demo for website (prod and dev):要解决此问题，我建议您将不同的dist文件夹分开：仅用于库的dist和用于网站（产品和开发）的dist-demo ：

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

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

问题描述

1 个解决方案

解决方案1
0 2022-01-09 10:05:47

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

问题描述

1 个解决方案

解决方案1 0 2022-01-09 10:05:47

解决方案1
0 2022-01-09 10:05:47