diff --git a/docusaurus/docs/custom-templates.md b/docusaurus/docs/custom-templates.md index 58af9b0ec1c..bab1c54a00d 100644 --- a/docusaurus/docs/custom-templates.md +++ b/docusaurus/docs/custom-templates.md @@ -58,28 +58,31 @@ You can add whatever files you want in here, but you must have at least the file ### The `template.json` file -This is the configuration file for your template. It allows you to define information that should become a part of the generated project's `package.json` file, such as dependencies (only dependencies are supported for now) and any custom scripts that your template relies on. It should be structured as follows: +This is the configuration file for your template. As this is a new feature, more options will be added over time. For now, only a `package` key is supported. + +The `package` key lets you provide any keys/values that you want added to the new project's `package.json`, such as dependencies (only dependencies are supported for now) and any custom scripts that your template relies on. + +Below is an example `template.json` file: ```json { "package": { "dependencies": { + "eslint-plugin-jsx-a11y": "^6.2.3", "serve": "^11.2.0" }, "scripts": { "serve": "serve -s build", "build-and-serve": "npm run build && npm run serve" }, - "browserslist": [ - "defaults", - "not IE 11", - "not IE_Mob 11", - "maintained node versions", - ] + "eslintConfig": { + "extends": ["react-app", "plugin:jsx-a11y/recommended"], + "plugins": ["jsx-a11y"] + } } } ``` -Any values you add for `"dependencies"` and `"scripts"` will be merged with the values used in the initialisation process of `react-scripts`. Any other information you add to `"package"` will be added to the generated project's `package.json` file, replacing any existing values associated with those keys. +Any values you add for `"dependencies"` and `"scripts"` will be merged with the Create React App defaults. Values for any other keys will be used as-is, replacing any matching Create React App defaults. For convenience, we always replace `npm run` with `yarn` in your custom `"scripts"`, as well as in your `README` when projects are initialized with yarn. diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index 4f9f205e411..45646820d5d 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -122,26 +122,45 @@ module.exports = function( // Keys to ignore in templatePackage const templatePackageBlacklist = [ + 'name', + 'version', + 'description', + 'keywords', + 'homepage', + 'bugs', + 'license', + 'author', + 'contributors', + 'files', + 'main', + 'browser', + 'bin', + 'man', + 'directories', + 'repository', 'devDependencies', 'peerDependencies', - 'name', + 'bundledDependencies', + 'optionalDependencies', + 'engineStrict', + 'os', + 'cpu', + 'preferGlobal', + 'private', + 'publishConfig', ]; // Keys from templatePackage that will be merged with appPackage - const templatePackageToMerge = [ - 'dependencies', - 'scripts', - ]; + const templatePackageToMerge = ['dependencies', 'scripts']; // Keys from templatePackage that will be added to appPackage, // replacing any existing entries. - const templatePackageToReplace = Object.keys(templatePackage) - .filter(key => { - return ( - templatePackageBlacklist.indexOf(key) === -1 && - templatePackageToMerge.indexOf(key) === -1 - ); - }); + const templatePackageToReplace = Object.keys(templatePackage).filter(key => { + return ( + templatePackageBlacklist.indexOf(key) === -1 && + templatePackageToMerge.indexOf(key) === -1 + ); + }); // Copy over some of the devDependencies appPackage.dependencies = appPackage.dependencies || {}; @@ -253,7 +272,8 @@ module.exports = function( // Install additional template dependencies, if present // TODO: deprecate 'dependencies' key directly on templateJson - const templateDependencies = templatePackage.dependencies || templateJson.dependencies; + const templateDependencies = + templatePackage.dependencies || templateJson.dependencies; if (templateDependencies) { args = args.concat( Object.keys(templateDependencies).map(key => {