You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

125 lines
2.6 KiB

4 years ago
  1. # es6-templates
  2. Compiles JavaScript written using template strings to use ES5-compatible
  3. syntax. For example, this:
  4. ```js
  5. var name = "Nicholas",
  6. msg = `Hello, ${name}!`;
  7. console.log(msg); // "Hello, Nicholas!"
  8. ```
  9. compiles to this:
  10. ```js
  11. var name = "Nicholas",
  12. msg = "Hello, " + name + "!";
  13. console.log(msg); // "Hello, Nicholas!"
  14. ```
  15. For more information about the proposed syntax, see the [TC39 wiki page on
  16. template strings](http://tc39wiki.calculist.org/es6/template-strings/).
  17. ## Install
  18. ```
  19. $ npm install es6-templates
  20. ```
  21. ## Usage
  22. ```js
  23. $ node
  24. > var compile = require('es6-templates').compile;
  25. > compile('`Hey, ${name}!`')
  26. { 'code': ..., 'map': ... }
  27. ```
  28. Without interpolation:
  29. ```js
  30. `Hey!`
  31. // becomes
  32. '"Hey!"'
  33. ```
  34. With interpolation:
  35. ```js
  36. `Hey, ${name}!`
  37. // becomes
  38. "Hey, " + name + "!"
  39. ```
  40. With a tag expression:
  41. ```js
  42. escape `<a href="${href}">${text}</a>`
  43. // becomes
  44. escape(function() {
  45. var strings = ["\u003Ca href=\"", "\"\u003E", "\u003C/a\u003E"];
  46. strings.raw = ["\u003Ca href=\"", "\"\u003E", "\u003C/a\u003E"];
  47. return strings;
  48. }(), href, text);
  49. ```
  50. Or work directly with the AST:
  51. ```js
  52. $ node
  53. > var transform = require('es6-templates').transform;
  54. > transform(inputAST)
  55. ```
  56. Transforming ASTs is best done using [recast][recast] to preserve formatting
  57. where possible and for generating source maps.
  58. ## Browserify
  59. Browserify support is built in.
  60. ```
  61. $ npm install es6-templates # install local dependency
  62. $ browserify -t es6-templates $file
  63. ```
  64. ## Contributing
  65. [![Build Status](https://travis-ci.org/esnext/es6-templates.svg?branch=master)](https://travis-ci.org/esnext/es6-templates)
  66. ### Setup
  67. First, install the development dependencies:
  68. ```
  69. $ npm install
  70. ```
  71. Then, try running the tests:
  72. ```
  73. $ npm test
  74. ```
  75. ### Pull Requests
  76. 1. Fork it
  77. 2. Create your feature branch (`git checkout -b my-new-feature`)
  78. 3. Commit your changes (`git commit -am 'Add some feature'`)
  79. 4. Push to the branch (`git push origin my-new-feature`)
  80. 5. Create new Pull Request
  81. Any contributors to the master es6-templates repository must sign the
  82. [Individual Contributor License Agreement (CLA)][cla]. It's a short form that
  83. covers our bases and makes sure you're eligible to contribute.
  84. [cla]: https://spreadsheets.google.com/spreadsheet/viewform?formkey=dDViT2xzUHAwRkI3X3k5Z0lQM091OGc6MQ&ndplr=1
  85. When you have a change you'd like to see in the master repository, [send a pull
  86. request](https://github.com/esnext/es6-templates/pulls). Before we merge
  87. your request, we'll make sure you're in the list of people who have signed a
  88. CLA.
  89. [recast]: https://github.com/benjamn/recast