Typescript 模块 + Webpack + RequireJS
Typescript Module + Webpack + RequireJS
正在开发我的第一个打字稿模块,我希望它能够同时用于 Apache Cordova 应用程序和 .Net 4.6 MVC 站点(目前)。在详尽阅读之后,我得出的结论是 CommonJS 最适合我的需求。但是我正在努力将模块集成到 MVC 站点中。
我使用带有 awesome-typescript-loader 的 webpack 将我的模块捆绑到单个 js 文件中,然后我使用 requirejs 将模块加载到 MVC 站点上。我尝试了多种方法来导入模块,但都没有成功。
在我的打字稿模块中,我有一个入口点 (index.ts),我只在其中导出主要的 class: export * from './src/engine';
,我正在使用这个 class 作为我在 webpack 中的入口点:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = false;
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: ['.ts', '.tsx'] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
}
]
},
plugins: [
new CheckerPlugin()
]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'engine': './index.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(en)$/)
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin()
])
});
return [clientBundleConfig];
};
获得生成的 engine.js 文件后,我将在 MVC 站点上使用 requirejs 加载模块:
<script data-main="/scripts/main" src="~/Scripts/require.js"></script>
main.js
require(['/scripts/compliance-engine.js']);
最终目标是我可以从 javascript 调用 var compliance = require('compliance-engine');
,实例化引擎的新实例。
遗憾的是,无论我尝试什么,我都无法完成上述工作(任何时候都不会抛出错误,我只是无法在网站上引用该模块)。
使用 webpack
时,除非您明确定义,否则不会导出任何内容,您应该将其添加到您的 webpack.config.js
output: {
library: 'MyLibrary'
libraryTarget: 'var',
}
这会将一个名为 MyLibrary
的变量放在 window 上,并且可以从您的其他代码访问它。
libraryTarget
还有其他选项,例如 umd
/amd
等。
你可以阅读它 here
正在开发我的第一个打字稿模块,我希望它能够同时用于 Apache Cordova 应用程序和 .Net 4.6 MVC 站点(目前)。在详尽阅读之后,我得出的结论是 CommonJS 最适合我的需求。但是我正在努力将模块集成到 MVC 站点中。
我使用带有 awesome-typescript-loader 的 webpack 将我的模块捆绑到单个 js 文件中,然后我使用 requirejs 将模块加载到 MVC 站点上。我尝试了多种方法来导入模块,但都没有成功。
在我的打字稿模块中,我有一个入口点 (index.ts),我只在其中导出主要的 class: export * from './src/engine';
,我正在使用这个 class 作为我在 webpack 中的入口点:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = false;
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: ['.ts', '.tsx'] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
}
]
},
plugins: [
new CheckerPlugin()
]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'engine': './index.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(en)$/)
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin()
])
});
return [clientBundleConfig];
};
获得生成的 engine.js 文件后,我将在 MVC 站点上使用 requirejs 加载模块:
<script data-main="/scripts/main" src="~/Scripts/require.js"></script>
main.js
require(['/scripts/compliance-engine.js']);
最终目标是我可以从 javascript 调用 var compliance = require('compliance-engine');
,实例化引擎的新实例。
遗憾的是,无论我尝试什么,我都无法完成上述工作(任何时候都不会抛出错误,我只是无法在网站上引用该模块)。
使用 webpack
时,除非您明确定义,否则不会导出任何内容,您应该将其添加到您的 webpack.config.js
output: {
library: 'MyLibrary'
libraryTarget: 'var',
}
这会将一个名为 MyLibrary
的变量放在 window 上,并且可以从您的其他代码访问它。
libraryTarget
还有其他选项,例如 umd
/amd
等。
你可以阅读它 here