@10up/scripts 中文文档教程

Question

10up Scripts

用于 10up 开发的捆绑脚本集合。

Install

npm install --save-dev @10up/scripts

Scripts

10up-scripts build

构建 CSS 和 JavaScript 文件。 这使用 Webpack 的 10up 配置。 查看下面的入口点以查看构建的内容。

10up-scripts start

构建 CSS 和 JavaScript 并监视文件的变化。

10up-scripts format-js

使用 10up 配置通过 ESLint 修复 JavaScript 格式问题。

10up-scripts lint-js

使用 10up 配置

10up-scripts lint-style

运行 ESLint 使用 10up 配置运行 Stylelint。

10up-scripts test-unit-jest

在当前项目上运行 Jest。

10up-scripts check-engines

验证节点和 npm 满足最低 package.json 版本。

项目是 wp-scripts 的一个分支

Configuration and Extension

Under the hood 10up-脚本使用 Webpack、Postcss、Stylelint、Jest、Babel 和 Eslint。 默认情况下，该软件包对所有这些工具使用 10up 标准配置。 但是，可以为每个工具覆盖或扩展配置。

Entry points

这个包在引擎盖下使用 Webpack 并使用以下入口点：

{
    admin: './assets/js/admin/admin.js',
    blocks: './includes/blocks/blocks.js',
    frontend: './assets/js/frontend/frontend.js',
    shared: './assets/js/shared/shared.js',
    styleguide: './assets/js/styleguide/styleguide.js',

    'admin-style': './assets/css/admin/admin-style.css',
    'editor-style': './assets/css/frontend/editor-style.css',
    'shared-style': './assets/css/shared/shared-style.css',
    style: './assets/css/frontend/style.css',
    'styleguide-style': './assets/css/styleguide/styleguide.css'
}

要覆盖，您需要在 package.json 文件中定义 @10up/scripts.entry。 例如：

{
    "@10up/scripts": {
        "entry": {
            "myEntry: ...
        }
    ...
    }
}

WordPress Dependecy Extraction

10up 脚本将自动运行 依赖提取插件。 如果您不想运行依赖项提取插件，您可以通过设置 ENV var TENUP_NO_EXTERNAL 或通过将 package.json 中的 wpDependencyExternals 设置为 false 来禁用它。

{
    "@10up/scripts": {
        "entry": {
            "myEntry: ...
        },
        "wpDependencyExternals": false
    ...
    }
}

Browsersync

10up 脚本自动启动 Browsersync。 您需要做的就是更改 package.json 中的 @10up/scripts.devURL 以指向您的本地开发 URL：

{
    "@10up/scripts": {
        "devURL": "https://project.test",
    ...
    }
}

Webpack

10up-scripts 将使用位于的 10up 标准 Webpack 配置在 /config/webpack.config.js 除非你定义一个 Webpack在你的项目中配置文件，例如你的项目根目录中有一个 webpack.config.js。 如果您只需要更改入口点，请参阅下面的入口点部分。

这是一个 webpack.config.js 示例，您可以将其添加到项目的根目录以扩展 10up/scripts Webpack。

const defaultConfig = require('@10up/scripts/config/webpack.config');
module.exports = {
    ...defaultConfig,
    myObject: {
        stuffHere: true
    }
};

ESLint

10up-scripts 将使用位于 /config/.eslintrc.js< 的 10up 标准 ESLint 配置/a> 扩展 @10up/eslint-config 除非你在你的项目中定义一个 ESLint 配置文件，例如你有一个 < code>.eslintrc.js 在您的项目根目录中。

Stylelint

10up-scripts 将使用位于 /config/stylelint.config 中的 10up 标准 Stylelint 配置。 js 扩展 @10up/stylelint-config 除非你在你的项目中定义一个 Stylelint 配置文件，例如你有项目根目录中的 stylelint.config.js。

PostCSS

10up-scripts 将使用位于 /config/postcss.config 中的 10up 标准 PostCSS 配置。 js 除非你在你的项目中定义了一个 PostCSS 配置文件，例如你的项目根目录中有一个 postcss.config.js。

Babel

10up-scripts 将使用 @10up/babel-preset-default 的 10up 标准 Babel 配置，除非你定义一个 Babel 配置文件在你的项目中，例如你的项目根目录中有一个 .babelrc。

Support Level

活跃：10up 正在为此积极努力，我们希望在可预见的未来继续努力，包括保持对最新版本 WordPress 的测试。 欢迎错误报告、功能请求、问题和请求请求。

Like what you see?