ducksoupdev / vue-webpack-typescript Goto Github PK
View Code? Open in Web Editor NEWA Vue, Webpack, Typescript, Bootstrap setup with hot reload, dynamic imports, unit testing, code coverage, sass, uncss and bundling/minification.
A Vue, Webpack, Typescript, Bootstrap setup with hot reload, dynamic imports, unit testing, code coverage, sass, uncss and bundling/minification.
It seems that the hot replacement for modules is not working?
If I change the text in an html file, the whole application reloads, and I lose all the state.
I'm using the default installation.
Was wondering if this template would work with TS and Single File Components. I'm brand new to VUE and my initial attempt failed but it is likely to just where I am on the learning curve.
Sorry to post this as an issue as it's more of a question
Hi,
Editing main.scss while running the dev server doesn't reload the css, and having this message in the console:
=> changed: D:\dev\my-project\src\sass\main.scss
{
"status": 3,
"message": "%",
"formatted": "Internal Error: %\n"
}
I tried with a fresh template installed via vue-cli. My npm has nothing installed globally except vue-cli.
Can anyone try and confirm the behavior?
This is on Ubuntu 16.04. Any suggestions?
> [email protected] copy:bs /home/bjmc/Sandbox/myproject/myproject-web
> ncp node_modules/bootstrap/dist/css/bootstrap.css src/css/bootstrap.css
[0] /home/bjmc/Sandbox/myproject/myproject-web/config/webpack.config.dev.js:15
[0] webpackConfig.plugins = [...webpackConfig.plugins,
[0] ^^^
[0]
[0] SyntaxError: Unexpected token ...
[0] at exports.runInThisContext (vm.js:53:16)
[0] at Module._compile (module.js:374:25)
[0] at Object.Module._extensions..js (module.js:417:10)
[0] at Module.load (module.js:344:32)
[0] at Function.Module._load (module.js:301:12)
[0] at Module.require (module.js:354:17)
[0] at require (internal/module.js:12:17)
[0] at Object.<anonymous> (/home/bjmc/Sandbox/myproject/myproject-web/webpack.config.js:1:80)
[0] at Module._compile (module.js:410:26)
[0] at Object.Module._extensions..js (module.js:417:10)
[0] webpack-dev-server --hot --inline exited with code 1
--> Sending SIGTERM to other processes..
[1] node-sass --watch --output ./src/css ./src/sass exited with code null
npm ERR! Linux 4.4.0-79-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `cross-env NODE_ENV=development npm run sass && npm run copy:bs && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'cross-env NODE_ENV=development npm run sass && npm run copy:bs && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the myproject-web package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development npm run sass && npm run copy:bs && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs myproject-web
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls myproject-web
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/bjmc/Sandbox/myproject/myproject-web/npm-debug.log
navbar.ts contains:
object: { default: string } = { default: 'Default object property!' }; // objects as default values don't need to be wrapped into functions
What's the idea here?
thanks
I appreciate the work done ๐
However, I was a bit curious if you did not use Single File Component approach deliberately.
Fresh pulldown of the template, trying to run npm run dev
after installing everything, saw: VueRouter is not a constructor
Looking into it for more details.
I'm using a proxy table in the regular webpack template (https://github.com/vuejs-templates/webpack/tree/master/template). I can configure that it is only applied in "dev mode".
This is not (yet) possible in vue-webpack-typescript.
I believe that, in general, it should be beneficial to take over as much as possible from the regular vue webpack template. The advantage is two fold:
Got an error wen try to run npm run test
22 04 2017 15:51:05.931:ERROR [plugin]: Error during loading "d:\Projects\2017\vue\simple-app\node_modules/karma-phantomjs-launcher" plugin:
Path must be a string. Received null
START:
[at-loader] Using [email protected] from typescript and "tsconfig.json" from d:\Projects\2017\vue\simple-app/tsconfig.json.
[at-loader] Checking started in a separate process...
[at-loader] Ok, 0.217 sec.
22 04 2017 15:51:09.116:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
22 04 2017 15:51:09.119:INFO [launcher]: Launching browser Chrome with unlimited concurrency
22 04 2017 15:51:09.120:ERROR [karma]: Found 1 load error
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "test"
npm ERR! node v7.9.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `cross-env NODE_ENV=development karma start karma.unit.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script 'cross-env NODE_ENV=development karma start karma.unit.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the simple-app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development karma start karma.unit.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs simple-app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls simple-app
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\My\AppData\Roaming\npm-cache\_logs\2017-04-22T05_51_09_195Z-debug.log
Node: 7.9.0
npm: 4.2
Windows 10
Hi,
I'm trying to add d3.js to the template, so I did:
npm install --save d3
npm install --save-dev @types/d3
then I've imported d3 typings using import d3 from 'd3';
It does compile, but d3.js doesn't get included in the bundle.
I tried to find out how vuejs files are added, but there isn't any explicit reference in the webpack config files, my guess is that awesome-typescript-loader is smart and knows how to retrieve them.
Same with axios, typings and js are resolved without explicit references in config.
My guess is that the problem comes from the fact d3 typings and js are 2 different npm modules.
I need some directions because I'm stuck :)
Hello. Thanks for your work! Awesome.
Question: how to include vue-meta (Vue plugin) to your template?
I already add to main.ts
this:
import Meta from 'vue-meta';
...
Vue.use(Meta, {
keyName: 'head', // the component option name that vue-meta looks for meta info on.
attribute: 'data-vue-meta', // the attribute name vue-meta adds to the tags it observes
ssrAttribute: 'data-vue-meta-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
tagIDKeyName: 'vmid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
});
...
And add this to home.ts
component:
...
export class HomeComponent extends Vue {
...
static head() {
return {
title: 'Test'
}
}
}
But this not working, don't show over written title..
When I run "npm run dev", ts-loader throws error.
TypeError: Cannot convert undefined or null to object
OS: Windows 10
> [email protected] dev O:\Dropbox\development\code\tryouts\vuejs\my-project
> cross-env NODE_ENV=development npm run sass && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"
> [email protected] sass O:\Dropbox\development\code\tryouts\vuejs\my-project
> node-sass --output ./src/css ./src/sass
Rendering Complete, saving .css file...
Wrote CSS to O:\Dropbox\development\code\tryouts\vuejs\my-project\src\css\main.css
Wrote 1 CSS files to O:\Dropbox\development\code\tryouts\vuejs\my-project\src\css
[0] Project is running at http://localhost:8081/
[0] webpack output is served from /
[0] Content not from webpack is served from ./src
[0] 404s will fallback to /index.html
[0] webpack: wait until bundle finished: /
[0] ts-loader: Using [email protected] and O:\Dropbox\development\code\tryouts\vuejs\my-project\tsconfig.json
[0] Hash: aaaeebcc443542d94e3f
[0] Version: webpack 2.2.1
[0] Time: 14217ms
[0] Asset Size Chunks Chunk Names
[0] main.js 725 kB 0, 1 [emitted] [big] main
[0] main.min.js 281 kB 1, 0 [emitted] [big] main.min
[0] main.js.map 880 kB 0, 1 [emitted] main
[0] main.min.js.gz 94.7 kB [emitted]
[0] ../assets/img/logo.png 6.85 kB [emitted]
[0] ../css/main.css 81 bytes [emitted]
[0] chunk {0} main.js, main.js.map (main) 686 kB [entry] [rendered]
[0] [8] ./~/vue/dist/vue.common.js 226 kB {0} {1} [built]
[0] [45] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]
[0] [46] ./src/main.ts 677 bytes {0} {1} [built]
[0] [47] (webpack)-dev-server/client?http://localhost:8081 5.28 kB {0} {1} [built]
[0] [48] (webpack)/hot/dev-server.js 1.57 kB {0} {1} [built]
[0] [112] ./~/strip-ansi/index.js 161 bytes {0} {1} [built]
[0] [114] ./src/components/about/index.ts 146 bytes {0} {1} [built]
[0] [117] ./src/components/list/index.ts 145 bytes {0} {1} [built]
[0] [119] ./src/components/navbar/index.ts 147 bytes {0} {1} [built]
[0] [123] ./~/url/url.js 23.3 kB {0} {1} [built]
[0] [126] ./~/vue-router/dist/vue-router.common.js 56.1 kB {0} {1} [built]
[0] [127] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} [built]
[0] [128] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} [built]
[0] [130] (webpack)/hot/log-apply-result.js 1.02 kB {0} {1} [built]
[0] [131] multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.ts 52 bytes {0} {1} [built]
[0] + 117 hidden modules
[0] chunk {1} main.min.js (main.min) 686 kB [entry] [rendered]
[0] [8] ./~/vue/dist/vue.common.js 226 kB {0} {1} [built]
[0] [45] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]
[0] [46] ./src/main.ts 677 bytes {0} {1} [built]
[0] [47] (webpack)-dev-server/client?http://localhost:8081 5.28 kB {0} {1} [built]
[0] [48] (webpack)/hot/dev-server.js 1.57 kB {0} {1} [built]
[0] [112] ./~/strip-ansi/index.js 161 bytes {0} {1} [built]
[0] [114] ./src/components/about/index.ts 146 bytes {0} {1} [built]
[0] [117] ./src/components/list/index.ts 145 bytes {0} {1} [built]
[0] [119] ./src/components/navbar/index.ts 147 bytes {0} {1} [built]
[0] [123] ./~/url/url.js 23.3 kB {0} {1} [built]
[0] [126] ./~/vue-router/dist/vue-router.common.js 56.1 kB {0} {1} [built]
[0] [127] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} [built]
[0] [128] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} [built]
[0] [130] (webpack)/hot/log-apply-result.js 1.02 kB {0} {1} [built]
[0] [131] multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.ts 52 bytes {0} {1} [built]
[0] + 117 hidden modules
[0] webpack: Compiled successfully.
[0] webpack: Compiling...
[0] webpack: wait until bundle finished: /css/main.css
[0] O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\ts-loader\dist\watch-run.js:15
[0] Object.keys(watcher.mtimes)
[0] ^
[0]
[0] TypeError: Cannot convert undefined or null to object
[0] at Function.keys (native)
[0] at Compiler.<anonymous> (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\ts-loader\dist\watch-run.js:15:16)
[0] at next (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\tapable\lib\Tapable.js:140:14)
[0] at Compiler.Shared.share.compilerInvalid (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack-dev-middleware\lib\Shared.js:144:5)
[0] at next (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\tapable\lib\Tapable.js:140:14)
[0] at Compiler.<anonymous> (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\CachePlugin.js:32:5)
[0] at Compiler.applyPluginsAsyncSeries (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\tapable\lib\Tapable.js:142:13)
[0] at Watching._go (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\Compiler.js:43:16)
[0] at Watching.invalidate (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\Compiler.js:121:8)
[0] at Watching.<anonymous> (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\Compiler.js:106:8)
[0] at EventEmitter.<anonymous> (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\node\NodeWatchFileSystem.js:44:4)
[0] at EventEmitter.g (events.js:260:16)
[0] at emitTwo (events.js:87:13)
[0] at EventEmitter.emit (events.js:172:7)
[0] at EventEmitter._onTimeout (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\watchpack\lib\watchpack.js:139:7)
[0] at Timer.listOnTimeout (timers.js:92:15)
[0] webpack-dev-server --hot --inline exited with code 1
--> Sending SIGTERM to other processes..
[1] node-sass --watch --output ./src/css ./src/sass exited with code 1
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\ooo\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v4.4.3
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `cross-env NODE_ENV=development npm run sass && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'cross-env NODE_ENV=development npm run sass && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the my-project package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development npm run sass && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs my-project
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls my-project
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\ooo\AppData\Roaming\npm-cache\_logs\2017-02-22T15_05_30_614Z-debug.log
These work, for Vue + Typescript + Webpack:
import { configure } from '@storybook/vue'
// automatically import all files ending in *.stories.js
const req = require.context('../src/stories', true, /.stories.ts$/);
function loadStories() {
req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module)
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const genDefaultConfig = require('@storybook/vue/dist/server/config/defaults/webpack.config.js');
module.exports = (storybookBaseConfig, configType) => {
const config = genDefaultConfig(storybookBaseConfig, configType);
config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html')
config.module.rules.push({
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true // used with ForkTsCheckerWebpackPlugin
},
}
],
})
config.plugins.push(new ForkTsCheckerWebpackPlugin())
return config;
};
Hey, first of all awesome work on this template!
I was wondering if there will be support for scoped styles in the future?
Because *.vue
files already natively support <style scoped src="./nameOfComponent.scss"></style>
.
I mean I love the way the import "./nameOfComponent.scss"
works but maybe add styles as a component parameter just like template.
Proposed idea:
@Component({
template: require('./home.html'),
styleUrls: [ './home.scss', './secondHomeStyles.scss' ] //how angular2 does it
})
or this way
@Component({
template: require('./home.html'),
style: require('./home.scss') //an approach more similar to the template.
})
I don't know if this is at all feasible or if there's already a workaround that doesn't involve switching to vue files.
With the webpack template (in vue-cli), I can add following npm script and allow debugging tests. This doesn't work with vue-webpack-typescript template.
"debug- unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --browsers=Chrome --single-run=false --auto-watch",
I tweaked the karma.unit.js file in order to use also Chrome browser, but still no success:
browsers:['Chrome'],
preprocessors: {
'src/test.ts': ['webpack','sourcemap']
},
Obviously, following packages need to be installed
"karma-chrome-launcher": "^2.0.0",
"karma-sourcemap-loader": "^0.3.7",
Any suggestion?
Very nice project and clever test approach.
I'm just wondering why we have e.g. in main.ts
import * as Vue from 'vue';
rather than import Vue from 'vue' as it
Warm regards
paul.
I was trying to add support for Font Awesome, however I cannot get the font files to be referred correctly:
I have the following updates:
"copy:fa": "ncp node_modules/font-awesome/css/font-awesome.css src/css/font-awesome.css && ncp node_modules/font-awesome/fonts/ src/fonts/"
"build": "cross-env NODE_ENV=production npm run clean && npm run test && npm run sass && npm run copy:bs && npm run copy:fa && npm run build:parts && npm run clean:css && npm run process:html"
However the disted CSS still refers to the fonts from within /src
directory. I am pretty sure we need to update the webpack config somehow, but definitely not an expert on it so I'm stuck at this step.
Would love to hear your thoughts.
Thanks
Thanks for the template, it's the only one among the ones I saw, not having babel and eslint, looks like the most proper typescript setup so far :)
I've just scaffolded a new project, ran npm run build
and I see that dist/css/main.#.css is not minified (though "treeshaken"). I had this warning printed a few times during the build process, not sure if it's important, I'm new to webpack:
WARNING in ./node_modules/css-loader?{"minimize":true,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{}!./node_modules/sass-loader/lib/loader.js?{"outputStyle":"expanded","sourceMap":true,"sourceMapContents":true}!./src/sass/main.scss
(Emitted value instead of an instance of Error)
โ ๏ธ PostCSS Loader
Previous source map found, but options.sourceMap isn't set.
In this case the loader will discard the source map entirely for performance reasons.
See https://github.com/postcss/postcss-loader#sourcemap for more information.
On a side note - I think it's worth updating bootstrap to v4.
Any idea about how we can write a stateful loginService which can be used across all components in typescript ? Without creating different instance of it in every component.
Hi,
As a wish of developing a multi micro-frontends applications, I discovered that the most elegant way of doing it, is to publish micro-frontends as npm packages, and use that inside a main micro-frontend, that can define requested specific versions of components.
In that case, I've made a config file for that specific target, and I will add a PR for it, so others can use it too, after I'll finish investigate how this development process is convenient for me and my team.
I think we need to include this in index.html just before ending head tag.
<base href="/" />
Create a fresh install of this boilerplate:
vue init ducksoupdev/vue-webpack-typescript example
cd example
npm install
Add the following to a file outside the src
directory, for example server/server.ts
const wrong: notatype = 'test'
Note the invalid typescript syntax.
Now try npm run dev
You will see the error:
ERROR in [at-loader] ./server/server.ts:1:14
TS2304: Cannot find name 'notatype'.
Child html-webpack-plugin for "index.html":
1 asset
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 425 bytes {0} [built]
webpack: Failed to compile.
In the webpack.config.base.js
, I try to exclude this folder. e.g.
{
test: /\.ts$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader',
exclude: ['./server']
},
{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader',
exclude: ['./server']
},
But it still appears to be bundling it.
Am I missing something?
Your webpack is using uglify for prod build, but neither it nor uglifyjs-webpack-plugin are included in package.json.
Also, UglifyJS is not es6 compatible, so it's probably better to use something else anyway.
Sorry if I got something wrong, I'm new to this stuff.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.