preact-cli

😺 Your next Preact PWA starts in 30 seconds.
授权协议 MIT License
开发语言 JavaScript
所属分类 应用工具、 终端/远程登录
软件类型 开源软件
地区 不详
投 递 者 程鸿煊
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

preact-cli

Start building a Preact Progressive Web App in seconds ��

Contents

Features

  • 100/100 Lighthouse score, right out of the box (proof)
  • Fully automatic code splitting for routes (see Route-Based Code Splitting)
  • Transparently code-split any component with an async! prefix
  • Auto-generated Service Workers for offline caching powered by Workbox
  • PRPL pattern support for efficient loading
  • Zero-configuration pre-rendering / server-side rendering hydration
  • Support for CSS Modules, LESS, Sass, Stylus; with Autoprefixer
  • Monitor your bundle/chunk sizes with built-in tracking
  • Automatic app mounting, debug helpers & Hot Module Replacement
  • In just 4.5kb you get a productive environment:

Requirements

Important: Node.js > V8.x and npm 5.2+ is a minimum requirement.

Usage

$ npx preact-cli create <template-name> <project-name>

Example:

$ npx preact-cli create default my-project

The above command pulls the template from preactjs-templates/default, prompts for some information, and generates the project at ./my-project/.

Official Templates

The purpose of official preact project templates are to provide opinionated development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to preact.js.

All official project templates are repos in the preactjs-templates organization. When a new template is added to the organization, you will be able to run preact create <template-name> <project-name> to use that template.

Current available templates include:

  • default - Default template with all features.

  • simple - The simplest possible preact setup in a single file

  • netlify - Netlify CMS template using preact.

  • typescript - Default template implemented in TypeScript

  • widget - Template for a widget to be embedded in another website.

�� Tip: Any Github repo with a 'template' folder can be used as a custom template:
preact create <username>/<repository> <project-name>

CLI Options

preact create

Create a project to quick start development.

$ preact create <template-name> <project-name>

  --name        The application name.
  --cwd         A directory to use instead of $PWD.
  --force       Force option to create the directory for the new app  [boolean] [default: false]
  --yarn        Installs dependencies with yarn.                      [boolean] [default: false]
  --git         Initialize version control using git.                 [boolean] [default: false]
  --install     Installs dependencies.                                [boolean] [default: true]

Note: If you don't specify enough data to the preact create command, it will prompt the required questions.

preact build

Create a production build

You can disable default: true flags by prefixing them with --no-<option>; for example, --no-sw, --no-esm, and --no-inline-css.

$ preact build

    --src              Specify source directory  (default src)
    --dest             Specify output directory  (default build)
    --cwd              A directory to use instead of $PWD  (default .)
    --esm              Builds ES-2015 bundles for your code  (default true)
    --sw               Generate and attach a Service Worker  (default true)
    --babelConfig      Path to custom Babel config (default .babelrc)
    --json             Generate build stats for bundle analysis
    --template         Path to custom HTML template
    --preload          Adds preload tags to the document its assets  (default false)
    --analyze          Launch interactive Analyzer to inspect production bundle(s)
    --prerender        Renders route(s) into generated static HTML  (default true)
    --prerenderUrls    Path to pre-rendered routes config  (default prerender-urls.json)
    --brotli           Adds brotli redirects to the service worker  (default false)
    --inline-css       Adds critical css to the prerendered markup  (default true)
    -c, --config       Path to custom CLI config  (default preact.config.js)
    -v, --verbose      Verbose output
    -h, --help         Displays this message

preact watch

Spin up a development server with multiple features like hot-module-replacement, module-watcher

$ preact watch

    --src              Specify source directory  (default src)
    --cwd              A directory to use instead of $PWD  (default .)
    --esm              Builds ES-2015 bundles for your code  (default false)
    --clear            Clear the console (default true)
    --sw               Generate and attach a Service Worker  (default false)
    --babelConfig      Path to custom Babel config (default .babelrc)
    --json             Generate build stats for bundle analysis
    --https            Run server with HTTPS protocol
    --key              Path to PEM key for custom SSL certificate
    --cert             Path to custom SSL certificate
    --cacert           Path to optional CA certificate override
    --prerender        Pre-render static content on first run
    --prerenderUrls    Path to pre-rendered routes config  (default prerender-urls.json)
    --template         Path to custom HTML template
    --refresh          Will use [`Preact-refresh`](https://github.com/JoviDeCroock/preact-refresh) to do hot-reloading
    -c, --config       Path to custom CLI config  (default preact.config.js)
    -H, --host         Set server hostname  (default 0.0.0.0)
    -p, --port         Set server port  (default 8080)
    -h, --help         Displays this message

Note:

  1. You can run dev server using HTTPS then you can use the following HTTPS=true preact watch
  2. You can run the dev server on a different port using PORT=8091 preact watch

preact list

Lists all the official preactjs-cli repositories

$ preact list

preact info

Prints debugging information concerning the local environment.

Deploying

# create a production build:
npm run build

# generate configuration in Firebase Hosting format:
npm run serve -- --server config

# Copy your static files to a server!

Pre-rendering

Preact CLI in order to follow PRPL pattern renders initial route (/) into generated static index.html - this ensures that users get to see your page before any JavaScript is run, and thus providing users with slow devices or poor connection your website's content much faster.

Preact CLI does this by rendering your app inside node - this means that we don't have access to DOM or other global variables available in browsers, similar how it would be in server-side rendering scenarios. In case you need to rely on browser APIs you could:

  • drop out of prerendering by passing --no-prerender flag to preact build,
  • write your code in a way that supports server-side rendering by wrapping code that requires browser's APIs in conditional statements if (typeof window !== "undefined") { ... } ensuring that on server those lines of code are never reached. Alternatively you could use a helper library like window-or-global.

Custom Configuration

Plugins

To make customizing your configuration easier, preact-cli supports plugins. Visit the Plugins wiki for a tutorial on how to use them.

Browserslist

You may customize your list of supported browser versions by declaring a "browserslist" key within your package.json. Changing these values will modify your JavaScript (via babel-preset-env) and your CSS (via autoprefixer) output.

By default, preact-cli emulates the following config:

package.json

{
	"browserslist": ["> 0.25%", "IE >= 9"]
}

Babel

To customize Babel, you have two options:

  1. You may create a .babelrc file in your project's root directory. Any settings you define here will overwrite matching config-keys within Preact CLI preset. For example, if you pass a "plugins" object, it will replace & reset all Babel plugins that Preact CLI defaults to.

  2. If you'd like to modify or add to the existing Babel config, you must use a preact.config.js file. Visit the Webpack section for more info, or check out the Customize Babel example!

Webpack

To customize preact-cli create a preact.config.js or a preact.config.json file.

preact.config.js

// ... imports or other code up here ...

// these props are both optional
export default {
	// you can add preact-cli plugins here
	plugins: [
		// either a function
		// (you'd probably import this because you can use the `webpack` function instead of an inline plugin)
		function () {},
		// strings also work (they get imported by preact-cli), useful for the json config
		'plugin-name',
		// with options
		[
			'plugin-name',
			{
				option: true,
			},
		],
	],
	/**
	 * Function that mutates the original webpack config.
	 * Supports asynchronous changes when a promise is returned (or it's an async function).
	 *
	 * @param {object} config - original webpack config.
	 * @param {object} env - options passed to the CLI.
	 * @param {WebpackConfigHelpers} helpers - object with useful helpers for working with the webpack config.
	 * @param {object} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
	 **/
	webpack(config, env, helpers, options) {
		/** you can change the config here **/
	},
};

See WebpackConfigHelpers docs for more info on helpers argument which contains methods to find various parts of configuration. Additionally see our recipes wiki containing examples on how to change webpack configuration.

Prerender multiple routes

The --prerender flag will prerender by default only the root of your application.If you want to prerender other routes you can create a prerender-urls.json file, which contains the set of routes you want to render.The format required for defining your routes is an array of objects with a url key and an optional title key.

prerender-urls.json

[
	{
		"url": "/",
		"title": "Homepage"
	},
	{
		"url": "/route/random"
	}
]

You can customise the path and/or name of prerender-urls.json by using the flag --prerenderUrls.

preact build --prerenderUrls src/prerender-urls.json

If a static JSON file is too restrictive, you may want to provide a javascript file that exports your routes instead.Routes can be exported as a JSON string or an object and can optionally be returned from a function.

// prerender-urls.js
module.exports = [
	{
		url: '/',
		title: 'Homepage',
	},
	{
		url: '/route/random',
	},
];

Template

A template is used to render your page by EJS.
You can uses the data of prerenderUrls which does not have title, using htmlWebpackPlugin.options.CLI_DATA.preRenderData in EJS.

The default one is visible here and it's going to be enough for the majority of cases.

If you want to customise your template you can pass a custom template with the --template flag.

The --template flag is available on the build and watch commands.

preact build --template src/template.html
preact watch --template src/template.html

Using CSS preprocessors

The default templates comes with a .css file for each component. You can start using CSS preprocessors at any given time during your project lifecycle by installing additional packages and then simply replacing those .css files.

SASS

  • npm install --save-dev node-sass sass-loader@10 (inside your preact application folder)
  • start replacing .css files with .scss files

LESS

  • npm install --save-dev less less-loader (inside your preact application folder)
  • start replacing .css files with .less files

Using Environment Variables

You can reference and use environment variables in your preact.config.js by using process.env:

export default {
	webpack(config, env, helpers, options) {
		if (process.env.MY_VARIABLE) {
			/** You can add a config here that will only used when your variable is truthy **/
		}
	},
};

If you'd like to use these variables in your application, you can use the DefinePlugin config from our recipes wiki.

Route-Based Code Splitting

"Route" components are automatically code-splitted at build time to create smaller bundles and avoid loading more code than is needed by each page. This works by intercepting imports for route components with an async loader, which returns a lightweight wrapper component that handles code splitting seamlessly.

Automatic code splitting is applied to all JavaScript and TypeScript files in the following locations:

Pattern Examples
src/routes/NAME
src/routes/home.js
src/routes/about/index.tsx
src/components/routes/NAME
src/components/routes/profile.ts
src/components/routes/profile/index.js
src/components/async/NAME
src/components/async/profile.ts
src/components/async/profile/index.js

Note:
Automatic code splitting only supports default exports, not named exports:

- import { Profile } from './routes/profile';
+ import Profile from './routes/profile';

This is an intentional limitation that ensures effective code splitting. For components that need named exports, place them in a directory that doesn't trigger automatic code splitting. You can then manually code-split the default export by re-exporting it from routes/ or importing it with the "async!" prefix.

  • webpack、vite、vue-cli、create-vue 这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。 先看这个表格: 脚手架 vue-cli create-vue 构建项目 vite 打包代码 webpack rollup 脚手架:创建项目,选择性安装需要的插件,指定统一的风格,生成demo。 构建项目:建立项目的运行环境,需要手动安装插件。 打包代码:代码写好之后,为了更好的使

  • webpack 是一个全能选手,啥都能干,只是有点复杂,对新手不太友好。 Rollup 是后起之秀,打包更简洁。 vite 把 rollup 变成了“开袋即食”,便于新手入门。 create-vue 基本取代了 vue-cli,除非你想创建 vue2 的项目。 脚手架 vue-cli create-vue 构建项目 vite 打包代码 webpack rollup 脚手架:创建项目,选择性安装需要

  • 1 **node.js 安装详细步骤教程** 不修改 修改了一直有问题 系统变量下 变量名【NODE_PATH】变量值 E:\nodejs\node_global\node_modules 用户变量下 path (3)点击编辑 --> (4)新增–> (5)D:\nodejs\node_giobal 2 将npm仓库地址切换成淘宝镜像地址 npm config set registry https

  • @TOC 第03节 VUE3环境搭建 [教学内容] (一)环境搭建 A、传统安装 1、下载源码 如果仅仅只是在项目或者某个文件中简单的使用vue,就可以直接在html中引入如下链接 <script src="https://unpkg.com/vue@next"></script> 可以复制上面的地址到浏览器打开源代码,并复制全部源代码,保存为本地文件js文件,加入到项目中就可以使用了 2、创建

 相关资料
  • Preact 是 React 的轻量化替代方案,仅有 3KB。并且提供了相同的 ES6 API,还具有组件和 Virtual DOM。 具有以下特性: 更接近于实质:Preact 在 DOM 上实现一个可能是最薄的一层虚拟 DOM 实现。 小体积:这将意味可以下载更少的 JavaScript 代码,解析和执行 —— 为您的代码节省更多的时间。 高性能:不仅是因为他的体积,还因为一个简单和可预测的

  • �� preact-minimal Minimal preact structure. Preact is just soooooo fast! ⚡ ⚡ ⚡ But when you have an idea and want to start coding right away, then it becomes really hard and timeconsuming to setup and

  • preact-to-nativescript This Library is experimental! Documentation Usage The following is assumed to be executed at the project root of a NativeScript project Install the library npm i preact-to-nativ

  • 问题内容: 我正在使用Preact(出于所有意图和目的,React)来渲染保存在状态数组中的项目列表。每个项目旁边都有一个删除按钮。我的问题是:单击该按钮时,将删除正确的项目(我已对此进行了几次验证),但是重新渲染项目时缺少 最后一个 项目,并且删除的项目仍然存在。我的代码(简体): 我究竟做错了什么?我是否需要以某种方式主动重新渲染?这是n + 1种情况吗? 澄清 :我的问题不在于国家的同步性。

  • cli

    fis. cli 命令行相关的信息和工具类方法暴露在此模块中。 Source: cli.js, line 1 Members (static) colors 指向 colors 模块。 Source: cli.js, line 20 (static) info package.json 中的信息 Source: cli.js, line 30 (static) name 命令行工具名字 Defau

  • CLI

    Run Prettier through the CLI with this script. Run it without any arguments to see the options. To format a file in-place, use --write. You may want to consider committing your code before doing that,