Hi im kind of new to ember, im looking for a way to tell broccoli not to include my img/ directory, i want to include some default images there which ill be programatically adding to the app
<img src='{{model.picture}}'/>
And i can see them ok in development but not in production since the name has a hash attaches due to brocolli task, how do i configure my BrocFile to exclude files in the directory i have checked the documentation here
https://github.com/rickharrison/broccoli-asset-rev
but i cant figure out where in my brocfile im expected to add that.
part of my brocfile
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
modals: {
layout: true,
style: true,
animation: 'scale'
}
});
app.import({
production: 'bower_components/raygun4js/dist/raygun.js'
});
app.import('bower_components/lodash/lodash.js');
Since you are using Ember (and Ember-CLI), just make sure to scroll down far enough in the broccoli-asset-rev documentation that you linked and you will reach the part most relevant to your circumstance. In particular, the provided 'Ember CLI addon usage' example should already be a close match for your case.
Adapting that to your stated problem and provided code, you would perhaps get something along the lines of
var app = new EmberApp({
fingerprint: {
exclude: ['img/']
},
modals: {
layout: true,
style: true,
animation: 'scale'
}
});
The relevant Ember-CLI documentation section also explains fingerprinting in slightly more detail.
Other than using the exclude option, you could
set enabled: false if you don't actually need fingerprinting
not include image extensions in general via something like extensions: ['js', 'css', 'map']
This answer applies for Ember 2.x through at least 3.x.
Another approach is to use an addon that helps you easily exclude files. Installing
ember-cli-funnel and then specifying the file accomplishes this pretty nicely:
// ember-cli-build.js
let app = new EmberApp(defaults, {
funnel: {
exclude: [
`${defaults.project.pkg.name}/routes/style-guide/**/*`,
'addon-tree-output/some-addon/styles/**/*.scss'
]
}
});
Related
As the title states, I'm unsure if it is possible to customize the folder Gatsby looks into to generate static pages. Apparently, this seems to be fixed without the ability to change from the pages/ folder. Ideally, this could be changed with something like an environment variable or similar. On the existing docs (https://www.gatsbyjs.com/docs/creating-and-modifying-pages/) nothing like this is mentioned.
Does anybody know if this is possible and I've just missed it somewhere? I've also opened this feature request discussion on the Gatsby GitHub: https://github.com/gatsbyjs/gatsby/discussions/35727
You can use the gatsby-plugin-page-creator (official plugin from Gatsby staff) to customize the source of the /pages folder. Simply use it as:
{
resolve: `gatsby-plugin-page-creator`,
options: {
path: `${__dirname}/src/account/pages`,
},
}
Or using environment files:
{
resolve: `gatsby-plugin-page-creator`,
options: {
path: `${__dirname}/src/${process.env.A_FOLDER_NAME}`,
},
}
You can even use multiple instances of the plugin or ignore some files with the ignore option.
I've tested it recently and worked like a charm.
The final configuration for this answer was:
{
resolve: `gatsby-plugin-page-creator`,
options: {
path: `${__dirname}/src/pages`,
ignore: [`*`]
},
}
I'm attempting to replace a library for testing.
The code I want to change:
import foo from 'foo-lib'; // foo-lib is a library dependency in package.json
I want this to import src/mock-foo.js instead.
This is for end-to-end tests, so I can't use something like Jest mocks.
I have a development-only webpack.config. In that I've tried:
resolve: {
alias: {
'foo-lib': path.resolve(__dirname, 'src/mock-foo.js')
},
extensions: ['.js'], // need this for some other aliases (not shown)
},
I've also tried the older technique in the plugins array:
new webpack.NormalModuleReplacementPlugin(
/foo-lib/,
'mock-foo.js'
),
as well as several variations on these.
I don't get errors, but the original library loads every time.
Is this even possible? If so, what's the correct syntax?
I think I've found one solution based on Replacing/aliasing a file using Webpack .
Testing with the is-number library (just for a simple example), this works:
plugins: [
new webpack.NormalModuleReplacementPlugin(
/is-number/,
require.resolve('./src/mock.js')
),
],
As one of the commenters on the other post mentioned, it's not clear why the resolve.alias approach didn't work.
I am converting a grunt + requireJS build process to webpack. We have something like this:
require.config({
shim:{
'popover': {
deps: ['tooltip']
},
'tooltip': {
deps: ['jquery']
}
}
})
Where we are specifically saying that tooltip depends on jquery so load jquery first. Popover depends on tooltip so load tooltip beforehand.
How do I translate this configuration into webpack 4 ? I've searched through the web trying to see if there are anything similar enough. Webpack's shimming doesn't do inter-library dependency. I don't see anything in the documentation too ...which surprised me much.
I have find articles (https://gist.github.com/xjamundx/b1c800e9282e16a6a18e)
that suggest of use import-loader to achieve such effect. So my config is like this:
module:{
strictExportPresence:true,
rules:[
{ parser: { requireEnsure: false } },
{ oneOf:[...bunch of stuffs for different file types] },
{ test : /tooltip/, loader: 'imports-loader?$=jquery' },
{ test : /popover/, loader: 'imports-loader?tooltip' }
]
also have the appropriate aliases in config set up.
the error I am getting it the browser is Constructor undefined on line
"Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype ..."
so tooltip library isn't being loaded before popover is.
I also don't see any new code added by webpack, which I think this could be my first problem since imports-loader supposedly add the specified library into popover module right ?
I am exactly seeing what's wrong with my approach anymore and exhausted a lot of resources online. I am sure someone had to deal with this type of problem before, please shade some light for me. Thanks!
You should provide tooltip and popover in resolve.alias section:
resolve: {
alias: {
"jquery": "lib/jquery-x.x.x",
"tooltip": "lib/tooltip-x.x.x",
"popover": "lib/popover-x.x.x"
}
}
Otherwise webpack won't be able to resolve modules to shim by imports-loader. Also, please note that you misspelled imports-loader in your configuration.
Good time of the day,
Recently I've been trying to implement dynamic module loading functionality for my project. However, I'm failing for past few hours. To give you an idea of what I'm trying to achieve, here is the structure of the project
plugins
developer
assets
scss
developer.scss
js
developer.js
themes
theme_name
webpack.mix.js
node_modules/
source
js
application.js
bootstrap.js
scss
application.scss
_variables.scss
So, in order to get the available plugins, I've made the following function
/**
* Get all plugins for specified developer
* which have 'assets' folder
* #param developerPath
* #param plugins
*/
function getDeveloperPlugins(developerPath, plugins) {
if (fs.existsSync(developerPath)) {
fs.readdirSync(developerPath).forEach(entry => {
let pluginPath = path.resolve(developerPath, entry),
assetsPath = path.resolve(pluginPath, 'assets');
if (fs.existsSync(assetsPath))
plugins[entry] = assetsPath;
});
}
}
This function loads all the available plugins for the specified developer, then goes inside and looks for the assets folder, if it exists, then it returns it and we can work with the provided directory later.
The next step is to generate the reference for every plugin (direct path to the developer_name.js file) which later should be 'mixed' into one plugins.bundle.js file.
In order to achieve this, the following piece of code 'emerged'
_.forEach(plugins, (directory, plugin) => {
let jsFolder = path.resolve(directory, 'js'),
scssFolder = path.resolve(directory, 'scss');
if (fs.existsSync(jsFolder)) {
webpackModules.push(jsFolder);
let possibleFile = path.resolve(jsFolder, plugin + '.js');
if (fs.existsSync(possibleFile))
pluginsBundle.js[plugin] = possibleFile;
}
if (fs.existsSync(scssFolder)) {
webpackModules.push(scssFolder);
let possibleFile = path.resolve(scssFolder, plugin + '.scss');
if (fs.existsSync(possibleFile))
pluginsBundle.scss[plugin] = possibleFile;
}
});
And the last step before I'm starting to edit the configuration of the Webpack is to get the folders for both scss and js files for all plugins and all developers:
let jsPluginsBundle = _.values(pluginsBundle.js),
scssPluginsBundle = _.values(pluginsBundle.scss);
And here is where the problems start to appear. I've tried many solutions offered either here on GitHub (in respective repositories), but I've failed so many times.
The only error I'm having now is this one:
ERROR in F:/Web/Projects/TestProject/plugins/developer/testplugin/assets/js/testplugin.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "base" at 0, attempted to resolve relative to "F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\js"
Yes, i know that webpack.mix.js file should be in the root folder of the project, however, i'm just developing theme, which uses modules developed by other members of the team.
So, idea was to:
Start build process: npm run dev|prod
Load plugins for all needed developers automatically
Use methods and html tags provided by the plugin (it is a mix of PHP for API routing and Vue.js for Components, etc) as follows: <test-component></test-component>
Any help is really appreciated, i just cant get my head around that error. If you need extra information, i'm ready to help since i myself need help to solve this issue =)
Update: The latest Webpack config used by mix.webpackConfig() (still failing though)
let webpackConfiguration = {
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: require.resolve('babel-loader'),
options: {
presets: [
'babel-preset-env'
].map(require.resolve),
plugins: [
'babel-plugin-transform-object-rest-spread'
].map(require.resolve)
}
}
}]
},
resolve: {
modules: webpackModules
}
};
mix.webpackConfig(webpackConfiguration);
And this is the content of the webpackModules variable:
[
'F:\\Web\\Projects\\TestProject\\themes\\testtheme\\node_modules',
'F:\\Web\\Projects\\TestProject\\themes\\testtheme',
'F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\js',
'F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\scss'
]
Okay, after 7 hours I've decided to try the most obvious method to solve the problem, to create node_modules folder in the root of the project and install laravel-mix there, and it worked like a charm.
Looks like, if it cant find the module in the directory outside the root scope of the Webpack, it will go up the tree to find the node_modules folder.
Developers should allow us to set the root folder for Webpack to fetch all the modules i guess, but well, problem is solved anyways.
I'm trying to use broccoli-config-replace unsuccessfully. What I would like to do is replacing a placeholder in my index.html and see it in the browser by executing broccoli serve
The interesting part of my Brocfile.js is this one:
var index_html = new ConfigReplace(app, './', {
// A list of files to parse:
files: [
'index.html',
],
configPath: 'replacements.json',
outputPath: 'production/',
patterns: [{
match: /\{\{SRC_REQUIRE\}\}/g,
replacement: function(config) { return config.SRC_REQUIRE; }
}]
});
module.exports = index_html;
but when I run broccoli serve what I get is this warning and nothing appears by pointing my browser to localhost:4200:
$ broccoli serve
Serving on http://localhost:4200
Warning: failed to stat tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/regenerator/node_modules/defs/node_modules/yargs/node_modules/cliui/node_modules/center-align/node_modules/align-text/node_modules/kind-of/README.md
Segmentation fault: 11
nice segfault huh? I guess what I've written is not that OK, but the documentation is very lacking. Can anybody suggest me the right configuration to accomplish this simple task? Thank you
I've figured out how to get what I want, but I think the plugin still needs some development. Here is the right configuration:
var index_html = new ConfigReplace(appHtml, 'conf', {
// A list of files to parse:
files: [
'/production/index.html'
],
configPath: 'replacements.json',
patterns: [{
match: /\{\{SRC_REQUIRE\}\}/g,
replacement: function(config) { return config.SRC_REQUIRE; }
}]
});
Some facts I've noted:
The configuration node must be a directory. Root is not allowed, so I had to place my replacements.json in a subfolder (/conf)
The outputPath option seems not to be considered. I omitted it and used a pickFile before in order to create a tree with the right structure I wanted. Then I passed the tree to ConfigReplace (the appHtml you see in the configuration I pasted above)
Lack of documentation is a bad pal for adopting broccoli happily. I'm confident though.