generator-webpack-project/app/index.js

Yeoman generator for Webpack projects

const gitRemoteOriginUrl = require('git-remote-origin-url')
const Generator = require('yeoman-generator')

const folderName = process.cwd().split('\\').pop()
const PATHS = {
  app: 'src',
  build: 'build'
}

module.exports = class extends Generator {
  prompting() {
    const prompts = [
      {
        type: 'input',
        name: 'name',
        message: 'Name of the project',
        default: folderName
      },
      {
        type: 'input',
        name: 'title',
        message:
          'Title in html (you can change it in webpack.config.js or template.ejs)',
        default: 'Title of the page'
      },
      {
        type: 'input',
        name: 'version',
        message: 'Version',
        default: '1.0.0'
      },
      {
        type: 'input',
        name: 'description',
        message: 'Description of the project'
      },
      {
        type: 'input',
        name: 'keywords',
        message: 'Keywords (separate with a comma)',
        filter: keywords =>
          keywords !== ''
            ? keywords.split(',').map(keyword => keyword.trim())
            : []
      },
      {
        type: 'input',
        name: 'author',
        message: 'Author'
      },
      {
        type: 'input',
        name: 'license',
        message: 'License',
        default: 'MIT'
      },
      {
        type: 'input',
        name: 'git',
        message: 'Git repository',
        default: () => gitRemoteOriginUrl().then(url => url).catch(err => null)
      },
      {
        type: 'list',
        name: 'lang',
        message: 'JavaScript or TypeScript',
        choices: [
          {
            name: 'JavaScript (ES6)',
            value: 'js'
          },
          {
            name: 'TypeScript',
            value: 'ts'
          }
        ],
        default: 0
      },
      {
        type: 'confirm',
        name: 'jsx',
        message: answers =>
          answers.lang === 'js' ? 'JSX support' : 'TSX (JSX) support',
        default: true
      },
      {
        when: answers => answers.jsx,
        type: 'input',
        name: 'jsxFactory',
        message: 'Custom JSX factory (leave empty if you want to use React)',
        default: 'h'
      },
      {
        type: 'checkbox',
        name: 'browserSupport',
        message: 'Browser support (https://github.com/ai/browserslist#queries)',
        choices: [
          {
            name: 'Last 2 versions',
            value: 'last 2 versions',
            checked: true
          },
          {
            name: '> 1% (global usage statistics',
            value: '> 1%',
            checked: true
          },
          {
            name: '> 5% (global usage statistics)',
            value: '> 5%'
          },
          {
            name: 'Not IE <= 8',
            value: 'not ie <= 8'
          },
          {
            name: 'Custom',
            value: 'custom'
          }
        ]
      },
      {
        when: answers => answers.browserSupport.indexOf('custom') >= 0,
        type: 'input',
        name: 'customBrowserSupport',
        message:
          'Browser support: custom queries (https://github.com/ai/browserslist#queries)',
        filter: queries =>
          queries !== '' ? queries.split(',').map(query => query.trim()) : []
      },
      {
        type: 'confirm',
        name: 'summary',
        message:
          "Next step is writing files and 'npm install' (click Enter for continue or Ctrl+C for cancelling operation)"
      }
    ]

    return this.prompt(prompts).then(answers => {
      if (!answers.customBrowserSupport) {
        this.config = Object.assign({}, answers, {
          customBrowserSupport: false
        })
      } else {
        this.config = answers
      }
    })
  }

  writing() {
    if (this.config.summary) {
      this._writingPackageJSON()
      this._writingEditorConfig()
      this.config.lang === 'js' ? this._writingEslintrc() : this._writingTs()
      this._writingFavicon()
      this._writingGitignore()
      this._writingIndex()
      this._writingReadme()
      this._writingStyles()
      this._writingStylelintrc()
      this._writingTemplate()
      this._writingWebpackConfig()
    }
  }

  _writingPackageJSON() {
    this.fs.copyTpl(
      this.templatePath('_package.json'),
      this.destinationPath('package.json'),
      this.config
    )
  }

  _writingEditorConfig() {
    this.fs.copy(
      this.templatePath('editorconfig'),
      this.destinationPath('.editorconfig')
    )
  }

  _writingEslintrc() {
    this.fs.copyTpl(
      this.templatePath('eslintrc.js'),
      this.destinationPath('.eslintrc.js'),
      this.config
    )
  }

  _writingTs() {
    this.fs.copy(
      this.templatePath('tslint.json'),
      this.destinationPath('tslint.json')
    )
    this.fs.copyTpl(
      this.templatePath('tsconfig.json'),
      this.destinationPath('tsconfig.json'),
      this.config
    )
  }

  _writingFavicon() {
    this.fs.copy(
      this.templatePath('favicon.png'),
      this.destinationPath(PATHS.app + '/favicon.png')
    )
  }

  _writingGitignore() {
    this.fs.copy(
      this.templatePath('gitignore'),
      this.destinationPath('.gitignore')
    )
  }

  _writingIndex() {
    const js = this.config.lang === 'js'
    const ext = js ? '.js' : '.ts'
    this.fs.copy(
      this.templatePath('index.js'),
      this.destinationPath(PATHS.app + '/index' + ext)
    )
    this.fs.copy(
      this.templatePath('index.prod.js'),
      this.destinationPath(PATHS.app + '/index.prod' + ext)
    )
    this.fs.copyTpl(
      this.templatePath('index.dev.js'),
      this.destinationPath(PATHS.app + '/index.dev' + ext),
      this.config
    )
    this.fs.copy(
      this.templatePath('app.js'),
      this.destinationPath(PATHS.app + '/app' + ext)
    )
  }

  _writingReadme() {
    this.fs.copyTpl(
      this.templatePath('README.md'),
      this.destinationPath('README.md'),
      this.config
    )
  }

  _writingStyles() {
    this.fs.copy(
      this.templatePath('style.scss'),
      this.destinationPath(PATHS.app + '/style.scss')
    )
  }

  _writingStylelintrc() {
    this.fs.copy(
      this.templatePath('stylelintrc'),
      this.destinationPath('.stylelintrc')
    )
  }

  _writingTemplate() {
    this.fs.copy(
      this.templatePath('template.ejs'),
      this.destinationPath(PATHS.app + '/template.ejs')
    )
  }

  _writingWebpackConfig() {
    this.fs.copyTpl(
      this.templatePath('webpack.config.js'),
      this.destinationPath('webpack.config.js'),
      this.config
    )
    this.fs.copyTpl(
      this.templatePath('webpack.parts.js'),
      this.destinationPath('webpack.parts.js'),
      this.config
    )
  }

  install() {
    if (this.config.summary) {
      this.npmInstall()
    }
  }
}