6to5-library-boilerplate 中文文档教程

发布于 10年前 浏览 27 项目主页 更新于 3年前

6to5-library-boilerplate

Travis 构建状态代码气候测试覆盖率依赖状态devDependency Status

在 ES6 中为 Node 和浏览器编写库。

Features

  • Author in ES6 (even the unit tests)
  • Export as ES5 & UMD
  • Mocha-Chai-Sinon testing stack
  • Unit tests that work in Node and in the browser

Getting Started

更新有关项目的元数据,包括 LICENSE 中的名称 和 package.json 信息。

src 中编写您的代码。 主文件是 index.js虽然文件名 可以更改)。

运行 gulp build 将源代码编译成可分发的格式。

将单元测试放在 test/unit 中。 gulp 命令运行测试。

Gulp tasks

  • gulp - Lint the library and tests, then run the unit tests
  • gulp build - Lint then build the library
  • gulp watch - Continuously run the unit tests as you make changes to the source and test files themselves
  • gulp test-browser - Build the library for use with the browser spec runner. Changes to the source will cause the runner to automatically refresh.

Browser Tests

浏览器规范运行器 可以在浏览器中打开以运行测试。 要让它工作,您必须先运行 gulp test-browser。 这 将设置一个 watch 任务,该任务将在您的脚本或测试发生更改时自动刷新测试。

Code Climate

这个库被设置为与 Code Climate 集成。 如果您从未使用过 Code Climate,那么您可能想知道 为什么它有用。 有两个原因:

  1. It consumes code coverage reports, and provides a coverage badge for the README
  2. It provides interesting stats on your library, if you're into that kinda thing

如果您对列表中的任何一项不感兴趣,都可以忽略它们。 或者你可以拉代码气候 完全从样板文件中取出,不用担心。 为此,请更新相关的 Gulp 任务和 Travis 建造。

如果您想为您的项目设置 Code Climate,请按照此处的步骤 .

Linting

此样板使用 JSHintJSCS 来整理您的源代码。 要改变规则, 分别编辑根目录下的.jshintrc.jscsrc文件。

鉴于您的单元测试不是您的库代码,因此 针对单独的 JSHint 配置对它们进行 lint。 为此,一个 单独的、单元测试特定的 .jshintrc 可以在 test 中找到 目录。 与 JSHint 不同,相同的 JSCS 规则适用于您的代码 和你的测试。

FAQ

When should I consider using this boilerplate?

您正在创作一个导出单个文件的库,而该文件 导出单个变量。

When might I not want to use this boilerplate?

您始终可以使用此样板作为灵感,但它最适合较小的库。 如果您正在构建一个完整的网络应用程序,您可能需要对构建系统进行更多更改。

What's the browser compatibility?

根据经验,此转译器在 IE9+ 中效果最佳。 你可以通过限制自己来支持IE8 ES6 特性的一个子集。 6to5 警告页面做了一个 出色地解释了支持旧版浏览器的细节。

Are there examples?

很少几个! 在 wiki 上查看它们。

Is there a Yeoman generator?

确实如此。

Customizing

在某种程度上,这个样板很容易定制。 要进行更改, 在下方找到您要执行的操作,然后按照说明进行操作。

I want to change the primary source file

该库的主要源文件是 src/index.js。 只有这个文件 文件导入将包含在最终构建中。 要更改此条目文件的名称:

  1. Rename the file
  2. Update the value of entryFileName in package.json under to5BoilerplateOptions

I want to change the exported file name

  1. Update main in package.json

I want to change the destination directory

  1. Update main in package.json

I want to change what variable my module exports

MyLibrary 是从此样板导出的变量的名称。 您可以通过以下方式更改此设置 这些步骤:

  1. Ensure that the variable you're exporting exists in your scripts
  2. Update the value of exportVarName in package.json under to5BoilerplateOptions
  3. Update the globals array in the test/.jshintrc file
  4. Check that the unit tests have been updated to reference the new value

I don't want to export a variable

  1. Ensure that your entry file does not export anything
  2. Set the property of exportVarName in package.json to be null
  3. Remove the variable name from the globals array in test/.jshintrc

My library depends on an external module

在最简单的情况下,您只需要安装模块并在您的脚本中使用它。

如果你想在你的单元测试文件中访问模块本身,你需要设置 支持模块的测试环境。 去做这个:

  1. Load the module in the test setup file. Attach any exported variables to global object if you'll be using them in your tests.
  2. Update both .jshintrc files to include any new global variable that you have added
  3. Add those same global variables to the mochaGlobals array in package.json under to5BoilerplateOptions

6to5-library-boilerplate

Travis build statusCode ClimateTest CoverageDependency StatusdevDependency Status

Author libraries in ES6 for Node and the browser.

Features

  • Author in ES6 (even the unit tests)
  • Export as ES5 & UMD
  • Mocha-Chai-Sinon testing stack
  • Unit tests that work in Node and in the browser

Getting Started

Update the metadata about the project, including the name in the LICENSE and the package.json information.

Write your code in src. The primary file is index.js (although the filename can be changed).

Run gulp build to compile the source into a distributable format.

Put your unit tests in test/unit. The gulp command runs the tests.

Gulp tasks

  • gulp - Lint the library and tests, then run the unit tests
  • gulp build - Lint then build the library
  • gulp watch - Continuously run the unit tests as you make changes to the source and test files themselves
  • gulp test-browser - Build the library for use with the browser spec runner. Changes to the source will cause the runner to automatically refresh.

Browser Tests

The browser spec runner can be opened in a browser to run your tests. For it to work, you must first run gulp test-browser. This will set up a watch task that will automatically refresh the tests when your scripts, or the tests, change.

Code Climate

This library is set up to integrate with Code Climate. If you've never used Code Climate, then you might be wondering why it's useful. There are two reasons:

  1. It consumes code coverage reports, and provides a coverage badge for the README
  2. It provides interesting stats on your library, if you're into that kinda thing

Either of these items on the list can simply be ignored if you're uninterested in them. Or you can pull Code Climate out entirely from the boilerplate and not worry about it. To do that, update the relevant Gulp tasks and the Travis build.

If you'd like to set up Code Climate for your project, follow the steps here.

Linting

This boilerplate uses JSHint and JSCS to lint your source. To change the rules, edit the .jshintrc and .jscsrc files in the root directory, respectively.

Given that your unit tests aren't your library code, it makes sense to lint them against a separate JSHint configuration. For this reason, a separate, unit-test specific .jshintrc can be found in the test directory. Unlike JSHint, the same JSCS rules are applied to both your code and your tests.

FAQ

When should I consider using this boilerplate?

You're authoring a library that exports a single file, and that one file exports a single variable.

When might I not want to use this boilerplate?

You can always use this boilerplate as inspiration, but it works best for smaller libraries. If you're building a full-scale webapp, you will likely need many more changes to the build system.

What's the browser compatibility?

As a rule of thumb, this transpiler works best in IE9+. You can support IE8 by limiting yourself to a subset of ES6 features. The 6to5 caveats page does an excellent job at explaining the nitty gritty details of supporting legacy browsers.

Are there examples?

Quite a few! Check them out on the wiki.

Is there a Yeoman generator?

There sure is.

Customizing

This boilerplate is, to a certain extent, easily customizable. To make changes, find what you're looking to do below and follow the instructions.

I want to change the primary source file

The primary source file for the library is src/index.js. Only the files that this file imports will be included in the final build. To change the name of this entry file:

  1. Rename the file
  2. Update the value of entryFileName in package.json under to5BoilerplateOptions

I want to change the exported file name

  1. Update main in package.json

I want to change the destination directory

  1. Update main in package.json

I want to change what variable my module exports

MyLibrary is the name of the variable exported from this boilerplate. You can change this by following these steps:

  1. Ensure that the variable you're exporting exists in your scripts
  2. Update the value of exportVarName in package.json under to5BoilerplateOptions
  3. Update the globals array in the test/.jshintrc file
  4. Check that the unit tests have been updated to reference the new value

I don't want to export a variable

  1. Ensure that your entry file does not export anything
  2. Set the property of exportVarName in package.json to be null
  3. Remove the variable name from the globals array in test/.jshintrc

My library depends on an external module

In the simplest case, you just need to install the module and use it in your scripts.

If you want to access the module itself in your unit test files, you will need to set up the test environment to support the module. To do this:

  1. Load the module in the test setup file. Attach any exported variables to global object if you'll be using them in your tests.
  2. Update both .jshintrc files to include any new global variable that you have added
  3. Add those same global variables to the mochaGlobals array in package.json under to5BoilerplateOptions
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文