如何使用es6和webpack开发像jquery这样的javascript库？

Question

I am trying to create a simple javascript library to learn something new. 我正在尝试创建一个简单的JavaScript库以学习新知识。 I am trying to use es6 and webpack. 我正在尝试使用es6和webpack。 Everything is working fine but I am stuck at one point, when I try to use it as standalone, I mean when I add <script src="bundle.js"></script> to my HTML page and try to access MyLibrary variable. 一切工作正常，但是当我尝试单独使用它时，我只能停留在一点，我的意思是当我将<script src="bundle.js"></script>到我的HTML页面并尝试访问MyLibrary变量时。 It gives me ReferenceError. 它给我ReferenceError。

Can someone please guide me how to properly setup and compile code so that it could be run without require.js etc. 有人可以指导我如何正确设置和编译代码，以便无需require.js等即可运行它。

Answer 1

I understand your question as mainly being about getting from typescript to an importable library which can be included in HTML and used in your <script>..</script> . 我理解您的问题主要是关于从打字稿到可导入的库的信息，该库可以包含在HTML中并在您的<script>..</script> 。

If this is correct you can use the below minimal setup. 如果正确，则可以使用以下最小设置。 At least it should get you started. 至少它应该让您入门。

package.json: 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: tsconfig.json：

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

webpack.config.js: 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: (the library entry point) main.ts ：（库入口点）

export class QLib {

    public helloWorld() {
        console.log("hello world");
    }
}

var QInstance = new QLib();
export default QInstance;

index.html: 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>

And finally install, build and start: 最后安装，构建并开始：

npm install && npm run build && npm start

Answer 2

To make your own js library you make a js file just like normal and attach it just as you seem to be doing. 要创建自己的js库，您可以像平常一样制作一个js文件，并按照您的意图进行附加。 Your issue might be coming in where you are referencing MyLibrary . 您可能会在引用MyLibrary地方遇到问题。 Are you referencing the variable before your js file loads? 您是否在加载js文件之前引用了变量？

如何使用es6和webpack开发像jquery这样的javascript库？

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-03-19 22:01:59

解决方案2
-3 2018-03-19 19:54:13

如何使用es6和webpack开发像jquery这样的javascript库？

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-03-19 22:01:59

解决方案2 -3 2018-03-19 19:54:13

解决方案1
1 已采纳 2018-03-19 22:01:59

解决方案2
-3 2018-03-19 19:54:13