I want to use in webpack multiple entries using the same file, but passing a variable.
My idea is use the webpack.definePlugin to each entry.
Example:
{
entry: {
file1: 'myfile.js',
file2: 'myfile.js',
},
output: {
filename: '[name]/myjs.js'
}
}
And I set the plugins:
{
plugins: [
new webpack.DefinePlugin({
MYVARTOFILE: 'a',
filename: 'file1/myjs.js' // I want to make something like this
}),
new webpack.DefinePlugin({
MYVARTOFILE: 'b',
filename: 'file2/myjs.js' // I want to make something like this
})
]
}
Or if is possible passing a variable to each entry in a different way.
If is possible to:
entry: {
file1: 'myfile.js?variable=a',
file2: 'myfile.js?variable=b',
}
And get in my file this variable,.
Related
I have an Nx Angular monorepository. I want to implement a custom generator so I can create apps quickly. I'm able to generate libraries by using the libraryGenerator function, from #nrwl/workspace. My generator is looking like this so far:
import { Tree, formatFiles } from '#nrwl/devkit';
import { libraryGenerator } from '#nrwl/workspace';
export default async function (host: Tree, schema: App) {
await generateLibrary(host, schema, 'models', 'domain');
await generateLibrary(host, schema, 'data-access', 'data');
await formatFiles(host);
}
async function generateLibrary(
host: Tree,
schema: App,
libraryName: string,
type: string
) {
const directory = `${schema.system.toLowerCase()}/${schema.name}`;
const importPath = `#org/${schema.system.toUpperCase()}/${
schema.name
}/${libraryName}`;
await libraryGenerator(host, {
name: libraryName,
directory,
importPath,
linter: 'eslint',
simpleModuleName: true,
strict: true,
tags: `type:${type}', scope:${schema.scope}`,
});
}
Now, I want to generate apps as well, but I'm not sure how one does that, since there's nothing like an "app generator" coming out of #nrwl/workspace, nor from #nrwl/devkit.
You can use applicationGenerator from #nrwl/angular/generators.
import { applicationGenerator } from '#nrwl/angular/generators
....
....
....
await applicationGenerator(host, {
name: appName,
directory: directoryName,
style: 'scss',
tags: ``,
routing: false,
e2eTestRunner: E2eTestRunner.None,
});
If you are looking for generating nest application, you can use :
import { applicationGenerator } from '#nrwl/nest';
....
....
....
await applicationGenerator(host, {
name: appName,
unitTestRunner: 'jest',
linter: Linter.EsLint,
directory: directoryName,
tags: ``
});
I am trying to read json file inside "index.html" file of the project, since for azure devops extension we already have require.js library, hence wanted to use the same capability of it to import "config.json" file inside "index.html" file.
basic file structure:
|-index.html
|-static |-icon.png
| |-config.json
|-vss-extension.json
my index.html file look somewhat like this :
init block
VSS.init({
explicitNotifyLoaded: true,
usePlatformScripts: true,
setupModuleLoader: true,
moduleLoaderConfig: {
paths: {
"Static": "static"
}
}
});
require block
VSS.require(
["TFS/WorkItemTracking/Services", "Static/config"],
function (_WorkItemServices, ConfigJson) {
VSS.ready(function(){
VSS.register(VSS.getContribution().id, function () {
return {
// Called when the active work item is modified
onFieldChanged: function (args) {
console.log(
"inside onfield : " +
JSON.stringify(ConfigJson)
);
}
....
};
});
VSS.notifyLoadSucceeded();
})
});
My vss-extension.json file :
File block
"files": [
{
"path": "static/config.json",
"addressable": true,
"contentType": "application/json"
},
....
]
I am always getting require.js Script error: https://requirejs.org/docs/errors.html#scripterror
Took reference from:
https://github.com/ALM-Rangers/Show-Area-Path-Dependencies-Extension/blob/master/src/VSTS.DependencyTracker/vss-extension.json for vss-extension file.
https://github.com/ALM-Rangers/Show-Area-Path-Dependencies-Extension/blob/master/src/VSTS.DependencyTracker/index.html for index.html
I am afraid that you couldn't directly get the content of the json file.
But you could try to use the HTTP request to get the content.
Please refer to the following sample:
onFieldChanged: function (args) {
var request = new XMLHttpRequest();
request.open('GET', 'config.json', true);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader('Content-Type');
console.log( "inside onfield : " + JSON.stringify(request.responseText));
}
}
Check out these two tickets for details.
Loading a JSON file in a VSTS extension
read local JSON file into variable
Is VSS using unmodified RequireJS? If yes, then you can use JSON plugin, which will help:
https://github.com/millermedeiros/requirejs-plugins
Using it is pretty simple, you just have to add a prefix json! when specifying a json file as a dependency:
VSS.require(
["TFS/WorkItemTracking/Services", "json!Static/config"],
function (_WorkItemServices, ConfigJson) {
VSS.ready(function(){
VSS.register(VSS.getContribution().id, function () {
return {
// Called when the active work item is modified
onFieldChanged: function (args) {
console.log(
"inside onfield : " +
JSON.stringify(ConfigJson)
);
}
....
};
});
VSS.notifyLoadSucceeded();
})
});
I'm trying to do code splitting and lazy loading with webpack using the import() method
import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
I'm getting
'import' and 'export' may only appear at the top level
Note top level imports are working fine, i'm just getting an issue when I try and using the dynamic variant of import()
var path = require('path');
module.exports = {
entry: {
main: "./src/app/app.module.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-application.js"
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
]
},
resolve : {
modules : [
'node_modules',
'bower_components'
]
},
devtool : "source-map"
}
EDIT:
If I change it so the syntax reads, it works.... but the chunk comments don't work to label the bundle. I'm confused because the documentation says the the following is depreciated.
The use of System.import in webpack did not fit the proposed spec, so
it was deprecated in webpack 2.1.0-beta.28 in favor of import().
System.import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
You need the plugin syntax-dynamic-import to be able to use the import() function with Babel.
Install it with:
npm install --save-dev #babel/plugin-syntax-dynamic-import
And add it to your plugins:
{
presets: ['es2015'],
plugins: ['#babel/plugin-syntax-dynamic-import']
}
My app doesn't support older browsers, and I like to trim down the set of Babel transforms to make the code easier to debug (so that the code in the debugger looks like more the original source).
However, when I migrate to react-hot-loader 3, this no longer works. That is, I can get RHL 3 to work with the standard es2015 preset, but not with my custom set of transforms. What happens is that the react components are rendered but never mounted, and won't respond to any events.
The set of transforms I am trying to use is:
var babel_plugins = [
'transform-runtime',
'transform-object-rest-spread',
// Transforms needed for modern browsers only
'babel-plugin-check-es2015-constants',
'babel-plugin-transform-es2015-block-scoping',
'babel-plugin-transform-es2015-function-name',
'babel-plugin-transform-es2015-parameters',
'babel-plugin-transform-es2015-destructuring',
// No longer needed with Webpack 2
// 'babel-plugin-transform-es2015-modules-commonjs',
'react-hot-loader/babel',
];
In response to the comments, here's more information:
Here's how I'm using the AppContainer:
export default (
<AppContainer>
<Router history={browserHistory}>
(My routes here...)
</Router>
</AppContainer>
);
And here's my dev server setup:
// Adjust the config for hot reloading.
config.entry = {
main: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://127.0.0.1:8000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./src/main.js', // Your appʼs entry point
],
frame: './src/frame_main.js', // Entry point for popup tab
};
config.plugins.push(new webpack.HotModuleReplacementPlugin());
const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
contentBase: path.resolve(__dirname, '../builds/'),
historyApiFallback: true,
stats: 'errors-only',
hot: true,
});
server.listen(8000, '127.0.0.1', () => {});
Here's the relevant portion of my webpack config:
test: /\.jsx?$/,
include: __dirname + '/src',
exclude: __dirname + '/src/libs',
use: [
{
loader: 'babel-loader',
options: {
plugins: babel_plugins,
presets: babel_presets
},
},
{
loader: 'eslint-loader',
},
]
I wanted to moved some files between two folders in an ember app when build is run but I am having no success.
//ember-cli-build.js
module.exports = function (defaults) {
var app = new EmberApp(defaults, {
hinting: false,
minifyCSS: {
enabled: true
},
bless: {
enabled: true
}
});
var moveFile = new Funnel('./app/locales', {
srcDir: 'en',
files: ['test.js'],
destDir: 'en_US',
allowEmpty: true
});
return new MergeTrees([moveFile, app.toTree()]);
};
When I do the build, I get no errors but the file is also not getting moved.
UPDATE: I am trying to move the file before ember-cli puts compiles the files and puts it in the dist folder
You can use broccoli-static-compiler https://github.com/joliss/broccoli-static-compiler
In brocfile.js ( ember-cli-build.js )
// at top of file
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');
// inside exporting function
const bootstrapMap = pickFiles('bower_components/bootstrap/dist/css/',
{
srcDir: '/',
files: ['bootstrap.css.map'],
destDir: '/assets'
});
// and so on, as many times as you need
const zeroClipboard = pickFiles('bower_components/zeroclipboard/dist/',
{
srcDir: '/',
files: ['ZeroClipboard.swf'],
destDir: '/assets'
});
// at the end
return mergeTrees([
app.toTree(),
bootstrapMap,
zeroClipboard,
// ...
], { overwrite: true });
With 'broccoli build', your app is build into a destination folder, so broccoli is the wrong tool to move files in an existing folder structure. Here I'm assuming it's run with something like 'broccoli build dist' on the command line which will create a new folder 'dist' with the results of the build, and error out if the directory already exists.
So let's say your project directory looks like this:
.
|--brocfile.js
|--app/
|--locales/ <----- funnel root
|--en/ <----- srcDir
|--test.js <----- file
When you funnel from ./app/locales, your srcDir and files` are relative to that as a root. The output tree is then put into the 'destDir' under the build output directory. What that will do is this:
.
|--brocfile.js
|--app/ <----- not changed
|--dist/ <----- build output directory
|--en_US <----- destDir
|--test.js <----- file
I think you want your destDir to be locales/en_US or app/locales/en_US.