如何使用es6和webpack开发类似jquery的javascript库？_Javascript_Typescript_Ecmascript 6

如何使用es6和webpack开发类似jquery的javascript库？

javascript typescript ecmascript-6

如何使用es6和webpack开发类似jquery的javascript库？,javascript,typescript,ecmascript-6,Javascript,Typescript,Ecmascript 6,我试图创建一个简单的javascript库来学习一些新的东西。我正在尝试使用es6和webpack。一切正常，但有一点我被卡住了，当我尝试将它作为独立的工具使用时，我的意思是当我将添加到我的HTML页面并尝试访问MyLibrary变量时。它给了我参考错误有人可以指导我如何正确设置和编译代码，以便它可以在没有require.js等的情况下运行。要创建自己的js库，您可以像平常一样创建一个js文件，并像看起来那样附加它。您的问题可能来自您引用的MyLibrary。您是否在加载js文件之前引用变量？

我试图创建一个简单的javascript库来学习一些新的东西。我正在尝试使用es6和webpack。一切正常，但有一点我被卡住了，当我尝试将它作为独立的工具使用时，我的意思是当我将

添加到我的HTML页面并尝试访问

MyLibrary

变量时。它给了我参考错误

有人可以指导我如何正确设置和编译代码，以便它可以在没有require.js等的情况下运行。

要创建自己的js库，您可以像平常一样创建一个js文件，并像看起来那样附加它。您的问题可能来自您引用的

MyLibrary

。您是否在加载js文件之前引用变量？

我理解您的问题主要是关于从typescript到一个可导入的库，可以包含在HTML中并在

中使用。

如果这是正确的，您可以使用下面的最小设置。至少你该开始了

package.json：

{
  "name": "qlib",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --progress --colors  --config webpack.config.js",
    "start": "webpack-dev-server --content-base ./ "
  },
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^4.1.0",
    "typescript": "^2.7.2",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1"
  }
}

tsconfig.json：

{
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es6",
        "noImplicitAny": false,
        "lib": [
            "es6",
            "dom"
        ]
    }
}

webpack.config.js：

var webpack = require("webpack");

module.exports = {
    entry: './main.ts',

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: ['ts-loader'], 
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".js"],
    },
    output: {
        filename: 'bundle.js',
        libraryExport: 'default',
        library: 'qlib'
    }
};

main.ts：（图书馆入口点）

index.html：

<html lang="en" >
    <head>
        <meta charset="utf-8">
        <title>MyLib Testing </title>
    </head>
    <body>    
        <script src="dist/bundle.js" type="text/javascript"></script>   
        <script>
            qlib.helloWorld();
        </script>
        <p>testing</p> 
    </body>
</html>

包括一个你的图书馆。另外，您在控制台上键入的引用错误具体是什么？请阅读文档：请不要用问题回答问题。答案部分仅用于回答问题。一旦你获得足够的声誉，你就可以对这个问题发表评论。非常感谢你的帮助。它工作正常！

<html lang="en" >
    <head>
        <meta charset="utf-8">
        <title>MyLib Testing </title>
    </head>
    <body>    
        <script src="dist/bundle.js" type="text/javascript"></script>   
        <script>
            qlib.helloWorld();
        </script>
        <p>testing</p> 
    </body>
</html>

npm install && npm run build && npm start