Comments (8)
Hello,
So here are my brief responses:
why don't using yarn instead of npm?
The main reason behind choosing npm
over yarn
is to keep the number of dependencies and third-party software at minimum. Don't get me wrong yarn
is a great tool but npm
after version 6 is delivering the same in terms of features and performance and it is part of the node
itself. You can learn more about yarn
vs npm
here - Why Are You Still Using Yarn in 2018? Anyway you can easily switch this setup to yarn
at it would work as expected.
in the package.json: why you put autoprefixer under dependencies instead of devDependencies?
autoprefixer
is something that is actually meant to be used in your production code. It depends on your project browser support matrix and can be part or not of your application code. In general the autoprefixer
is not needed for the setup itself, you can read more here dependencies or devDependencies?
why in the app.js you have import '../scss/app.scss';? I don't understand how could work importing an scss into a js file.
This setup utilises webpack
and this is the correct way of making webpack
manage your scss
files. Webpack is a module builder. This is important to understand, as Webpack does not run during your page, it runs during your development. You can see more examples here How to configure SCSS modules for Webpack
in the index.html file you're not directly including css () and js (<script>). How this can works?
This setup is mainly for building scss
, js
, fonts
, images
, etc. I've included html
building just for the purposes of demoing all the features. The <script>
and <link..>
tags are processed and appended during the webpack build process
. You can examine after the build that dist/index.html
file contains all your scripts properly included. All of this is configured in the webpack.config.js in the configuration of HtmlWebpackPlugin
. Such approach gives your a lot of flexibility and actually webpack can optimise your imports - for example import just the code that is used on the page. More on this topic can be found here Modern approach of JavaScript bundling with Webpack
Are you evaluating to add a cache busting system?
The main purpose of this template is to be embedded in existing project setups for example WordPress
, Laravel
, Express
applications etc. That is why it does not include web server setup and things like cache handling etc. But, I see this template to evolve in the direction of being used for a static websites as a standalone template so I plan to release a new version 4
which offer a development server and proper cache handling and more html parsing features.
Are you evaluating to add a system for including HTML partials?
The same goes here, too. I plan to expand html
feature of the template for version 4
.
Is there a way to start the project with an url like http://localhost:3000 and not the actual http://localhost:3000/frontend-webpack-boilerplate/dist/? Sure that if you're going to add a built-in server this will be super awesome
As I've mentioned above currently the setup does not include development web sever. I am planning to include Webpack Dev Server as part of the plan to extend the setup to support more html
parsing features, cache
busting towards converting this setup as template for static html development.
Hope my answers help you clarify your doubts.
Thanks
from frontend-webpack-boilerplate.
Thanks @dangelion, the ETA of v4
is a couple of weeks from now.
I am also planning to release create-<initializer>
package so you can easily create a new project by running $ npm init @weareathlon/frontend-webpack-boilerplate project-name
and this will install the latest version of this template in a new dir project-name
directly from npmjs.com. More of this create initialiser packages can be found here npm-init.
from frontend-webpack-boilerplate.
Using jQuery
in a webpack
managed setup will require some additional steps.
Back in the days v1.1.0
of this template was supporting jQuery
by:
Firstly installing jquery
via npm
or directly editing the package.json
in the dependencies
section:
...
"jquery": "^3.2.1"
...
Then modifying the webpack.config.js
by
- Defining in the beginning of the file:
const webpack = require('webpack');
- Then adding in the
plugins:[]
section the following:
...
plugins: [
...,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
})
]
then you can use it in your JS files, for example src/js/app.js
:
$(function() {
console.log("Hello from jQuery!");
});
We have dropped support for built-in jQuery from v2.0.0
and up. But you can still view the diff between v.1.0.0 and v1.1.0 when it added diff between v.1.0.0 and v1.1.0
.
from frontend-webpack-boilerplate.
Yes and no... it depends on your scope and the library itself. You can research for paper.js
for example - How load paper.js in webpack?
from frontend-webpack-boilerplate.
Hi @pnikolov
wow, so many thanks for your answer, I learnt a lot. And I can't wait for v4
! Any ideas for when could be released?
Thanks
from frontend-webpack-boilerplate.
Hi @pnikolov
I'd like to know how you handle importing of JS libraries in your boilerplate. For example, I did this:
npm install jquery
then imported it in app.js
with
import $ from 'jquery/dist/jquery';
but my IDE says:
Could not find a declaration file for module 'jquery/dist/jquery'. '/Users/myname/workspace/frontend-webpack-boilerplate/node_modules/jquery/dist/jquery.js' implicitly has an 'any' type.
Try `npm install @types/jquery` if it exists or add a new declaration (.d.ts) file containing `declare module 'jquery/dist/jquery';`ts(7016)
I also tried npm install @types/jquery
but the error persists.
Just curious how you manage this.
Thanks
from frontend-webpack-boilerplate.
You can read more about using jQuery here: Webpack - Usage: jQuery
from frontend-webpack-boilerplate.
@pnikolov Thanks a lot. jQuery was just an example library to understand the usage. I also use another library called Paper.js that gives me the same error as jQuery. So I need to follow the same steps also for that and in general for all dependencies?
Thanks
from frontend-webpack-boilerplate.
Related Issues (20)
- install fails on OSX 17 apple m1 chip HOT 1
- Move index.html and other .html files outside of the /src & /dist folders HOT 1
- Documentation is not up to date or webpack config is wrong HOT 6
- Add support/configuration for prettier code formatter tool
- Extra libraries HOT 1
- Vulnerabilities found after npm ci HOT 1
- Not es2015 HOT 2
- How to handle html pages if i have more than 20 html pages? HOT 3
- Eslint configuration HOT 1
- Images referenced in SASS are not building properly HOT 4
- Fonts fail to load HOT 3
- Multiple Sass & JS files | Question HOT 3
- Cache busting HOT 3
- Video Assets HOT 2
- Multiple-folder structure HOT 1
- Add ability to launch the dev environment with a normal domain, instead of localhost:8080 HOT 1
- Cannot include partials in ejs files HOT 2
- Configure Dependant for keeping npm packages up-to-date HOT 1
- Replace sass-lint with stylelint
- How to compile without MiniCssExtractPlugin? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from frontend-webpack-boilerplate.