Typescript load external libraries from CDN
I am working on a typescript solution which will have multiple entry points. In my solution I am using some external libraries. I use webpack + ts-loader for compiling and bundling. Now if I include all the external dependencies then my solution works perfectly. Now I am trying to figure out ways to exclude the external libraries from my bundle and load them from a CDN. I googled around and see that I need to include a require config and add the CDN paths there. But I am not able to figure out how can I make sure that the require config file is added to my bundle.
My webpack.config is below:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SPSaveWebpackPlugin = require('spsave-webpack-plugin');
module.exports = {
entry: {
helloworld:'./app/helloworld/helloworld.ts',
weather:'./app/weather/weather.ts'
},
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.ts', '.js' ]
},
target: "node",
externals:{},
output: {
publicPath:'https://siteurl/Style Library/webparts', // to get correct path inside sharepoint
filename: '[name]-bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'helloworld.html', // name of the output file
chunks:['helloworld'], // name of the entry point defined above
template: './app/helloworld/helloworld.html' // path to the html for the webpart
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'weather.html', // name of the output file
chunks:['weather'], // name of the entry point defined above
template: './app/weather/weather.html' // path to the html for the webpart
}),
new SPSaveWebpackPlugin({
"coreOptions": {
"checkin": true,
"checkinType": 1,
"siteUrl": "https://siteurl"
},
"credentialOptions": null,
"fileOptions": {
"folder": "Style Library/webparts"
}
})]
};
A sample solution is in my repo here
typescript webpack require es6-module-loader
asked 2 days ago
UnnieUnnie
588316
add a comment |
I am working on a typescript solution which will have multiple entry points. In my solution I am using some external libraries. I use webpack + ts-loader for compiling and bundling. Now if I include all the external dependencies then my solution works perfectly. Now I am trying to figure out ways to exclude the external libraries from my bundle and load them from a CDN. I googled around and see that I need to include a require config and add the CDN paths there. But I am not able to figure out how can I make sure that the require config file is added to my bundle.
My webpack.config is below:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SPSaveWebpackPlugin = require('spsave-webpack-plugin');
module.exports = {
entry: {
helloworld:'./app/helloworld/helloworld.ts',
weather:'./app/weather/weather.ts'
},
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.ts', '.js' ]
},
target: "node",
externals:{},
output: {
publicPath:'https://siteurl/Style Library/webparts', // to get correct path inside sharepoint
filename: '[name]-bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'helloworld.html', // name of the output file
chunks:['helloworld'], // name of the entry point defined above
template: './app/helloworld/helloworld.html' // path to the html for the webpart
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'weather.html', // name of the output file
chunks:['weather'], // name of the entry point defined above
template: './app/weather/weather.html' // path to the html for the webpart
}),
new SPSaveWebpackPlugin({
"coreOptions": {
"checkin": true,
"checkinType": 1,
"siteUrl": "https://siteurl"
},
"credentialOptions": null,
"fileOptions": {
"folder": "Style Library/webparts"
}
})]
};
A sample solution is in my repo here
typescript webpack require es6-module-loader
asked 2 days ago
UnnieUnnie
588316
add a comment |
I am working on a typescript solution which will have multiple entry points. In my solution I am using some external libraries. I use webpack + ts-loader for compiling and bundling. Now if I include all the external dependencies then my solution works perfectly. Now I am trying to figure out ways to exclude the external libraries from my bundle and load them from a CDN. I googled around and see that I need to include a require config and add the CDN paths there. But I am not able to figure out how can I make sure that the require config file is added to my bundle.
My webpack.config is below:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SPSaveWebpackPlugin = require('spsave-webpack-plugin');
module.exports = {
entry: {
helloworld:'./app/helloworld/helloworld.ts',
weather:'./app/weather/weather.ts'
},
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.ts', '.js' ]
},
target: "node",
externals:{},
output: {
publicPath:'https://siteurl/Style Library/webparts', // to get correct path inside sharepoint
filename: '[name]-bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'helloworld.html', // name of the output file
chunks:['helloworld'], // name of the entry point defined above
template: './app/helloworld/helloworld.html' // path to the html for the webpart
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'weather.html', // name of the output file
chunks:['weather'], // name of the entry point defined above
template: './app/weather/weather.html' // path to the html for the webpart
}),
new SPSaveWebpackPlugin({
"coreOptions": {
"checkin": true,
"checkinType": 1,
"siteUrl": "https://siteurl"
},
"credentialOptions": null,
"fileOptions": {
"folder": "Style Library/webparts"
}
})]
};
A sample solution is in my repo here
typescript webpack require es6-module-loader
asked 2 days ago
UnnieUnnie
588316
I am working on a typescript solution which will have multiple entry points. In my solution I am using some external libraries. I use webpack + ts-loader for compiling and bundling. Now if I include all the external dependencies then my solution works perfectly. Now I am trying to figure out ways to exclude the external libraries from my bundle and load them from a CDN. I googled around and see that I need to include a require config and add the CDN paths there. But I am not able to figure out how can I make sure that the require config file is added to my bundle.
My webpack.config is below:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SPSaveWebpackPlugin = require('spsave-webpack-plugin');
module.exports = {
entry: {
helloworld:'./app/helloworld/helloworld.ts',
weather:'./app/weather/weather.ts'
},
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.ts', '.js' ]
},
target: "node",
externals:{},
output: {
publicPath:'https://siteurl/Style Library/webparts', // to get correct path inside sharepoint
filename: '[name]-bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'helloworld.html', // name of the output file
chunks:['helloworld'], // name of the entry point defined above
template: './app/helloworld/helloworld.html' // path to the html for the webpart
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'weather.html', // name of the output file
chunks:['weather'], // name of the entry point defined above
template: './app/weather/weather.html' // path to the html for the webpart
}),
new SPSaveWebpackPlugin({
"coreOptions": {
"checkin": true,
"checkinType": 1,
"siteUrl": "https://siteurl"
},
"credentialOptions": null,
"fileOptions": {
"folder": "Style Library/webparts"
}
})]
};
A sample solution is in my repo here
typescript webpack require es6-module-loader
typescript webpack require es6-module-loader
asked 2 days ago
UnnieUnnie
588316
asked 2 days ago
UnnieUnnie
588316
asked 2 days ago
UnnieUnnie
588316
asked 2 days ago
UnnieUnnie
588316
asked 2 days ago
UnnieUnnie
588316
588316
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54252472%2ftypescript-load-external-libraries-from-cdn%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54252472%2ftypescript-load-external-libraries-from-cdn%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
