项目作者: kerrishotts

项目描述 :
Cordova Template with Webpack v2, TypeScript, and SCSS
高级语言: JavaScript
项目地址: git://github.com/kerrishotts/cordova-template-webpack-ts-scss.git
创建时间: 2017-03-08T04:19:24Z
项目社区:https://github.com/kerrishotts/cordova-template-webpack-ts-scss

开源协议:Other

下载


cordova-template-webpack-ts-scss 0.3.2

This template is designed to make it easy for you to write ES2015+, TypeScript, and SCSS code, and then bundle that code using webpack v2. It will do this automatically each time you run any Cordova/PhoneGap command that triggers the prepare phase.

Requirements

  • Node v5 or better

  • Cordova / PhoneGap CLI installed

Usage

You can create a project using this template as follows:

  1. $ cordova create hello com.example.hello hello --template cordova-template-webpack-ts-scss

Once the project has been created, you’ll need to add a platform, like so:

  1. $ cd hello
  2. $ cordova platform add --save browser

The act of adding a platform will automatically trigger the first prepare, and when the process is finished, the example code supplied with this template will have been transformed automatically.

Project Structure

This template uses an “external” structure for all transformed assets. This means there will be two directories that contain code:

  • www.src — this is where your ES2015+, TypeScript, SCSS files, and all other assets live
  • www — after prepare this will store copied assets and transformed files; you should not make changes to this directory

Within www.src, the following structure is assumed:

  1. www.src/
  2. index.html # your index.html file; app's entry point
  3. js/ # JavaScript files that don't need transpilation
  4. es/ # ES2015+ files
  5. index.js # ... App's javascript entry point
  6. ts/ # TypeScript files; if present overrides es/
  7. index.ts # ... App's typescript entry point; if present overrides es/index.js
  8. css/ # CSS stylesheets that don't need transformed
  9. scss/ # SCSS stylesheets
  10. styles.css # ... Primary styles; other styles need to be imported
  11. html/ # HTML files
  12. img/ # Image files
  13. lib/ # Library files (perhaps frameworks)
  14. vendor/ # Vendor files

Transformations

The following transformations occur just prior to the prepare phase.

Type Entry Point Output
TypeScript www.src/ts/index.ts www/js/bundle.js
ES2015 www.src/es/index.js www/js/bundle.js
SCSS www.src/scss/styles.scss www/css/bundle.css
HTML www.src/*.html www/*.html
CSS www.src/css/**/* www/css/**/*
Images www.src/img/**/* www/img/**/*
JavaScript www.src/js/**/* www/js/**/*
Lib files www.src/lib/**/* www/lib/**/*
Vendor files www.src/vendor/**/* www/vendor/**/*

The before prepare hook will transpile your code (and copy files when using the external structure). If an error occurs during this process, you’ll be notified. If no error occurs, you should see the something that looks like this:

  1. Starting webpack bundling and transpilation phase...
  2. (node:46414) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
  3. parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
  4. ts-loader: Using typescript@2.2.1 and /.../example-ts-ext/tsconfig.json
  5. ... webpack bundling and typescript transpilation phase complete!
  6. Hash: 76ef6d9645fc284a7a9c
  7. Version: webpack 2.2.1
  8. Time: 1977ms
  9. Asset Size Chunks Chunk Names
  10. js/bundle.js 22.6 kB 0 [emitted] main
  11. css/bundle.css 14.8 kB 0 [emitted] main
  12. index.html 2.52 kB [emitted]
  13. img/logo.png 21.8 kB [emitted]

The output indicates that four assets were generated. (The paths are relative to your www folder.) The bundle.* files are transformed from your ES2015+/TypeScript or SCSS files. The other files are files that were copied (this example was from an project using the external structure).

Debug vs Release

The plugin watches for a --release switch on the command line; if it is detected the following occurs:

  • Minification is turned on
  • Sourcemaps are turned off

If you need to change this behavior, you can override it by copying webpack.config.js in your project root to webpack.release.config.js and making the desired changes.

Modifying the configuration files

If you wish to modify webpack.config.js, webpack.release.config.js, or tsconfig.json, you can. The plugin will not attempt to override their contents, and it won’t attempt to overwrite the files on a reinstall. If you need to reset these configuration files, delete them and reinstall the plugin.

Built-in Webpack Loaders

The webpack.config.js files come with some useful loaders:

file pattern loader example
.json; .json5 json5-loader import pkg from "../../package.json";
.html; .txt raw-loader import template from "../templates/list-item.html";
.png; .jpg; *.svg file-loader import icon from "../img/icon.svg";
.eot; .ttf; .woff; .woff2 file-loader import icon from "../img/icon.svg";
imports-loader None; you must specify the rules yourself

If a file pattern you need to import isn’t matched with a loader, you can specify the loader directly:

  1. import xml from "raw-loader!../../config.xml";

Built-in asset copying

The following assets will be copied from www.src to www:

  1. *.html
  2. img/**/*
  3. css/**.*
  4. js/**.*
  5. vendor/**.*
  6. lib/**.*
  7. html/**/*

Built-in Module Resolution

The default configurations add the following module resolution paths (relative to project root):

  1. www.src/(es|ts)/lib
  2. www.src/(es|ts)/vendor
  3. www.src/lib
  4. www.src/vendor
  5. node_modules

Built-in Aliases

The default configurations add the following aliases, which may be useful in resolving your app’s modules:

Alias Path
$LIB www.src/lib
Lib www.src/lib
$VENDOR www.src/vendor
Vendor www.src/vendor

License

Apache 2.0.